# 7 codes personnalisés CSS utiles pour améliorer vos projets Webflow
Tutoriel3 minPublié le Sep 14, 2023Dernière mise à jour le Sommaire
[
Copied](#)[
](#)[
](#)[
](#)
- [H2 Example](#)
Résumez cet article avec une IA[
ChatGPT](#)[
Claude](#)[
Grok](#)[
Perplexity](#)[
Google AI](#)Points clés de l'article**Introduction**
En tant que développeur Webflow, vous savez que la plateforme offre une multitude de possibilités pour créer des sites web déjà très avancés. Cependant, il arrive parfois que vous ayez besoin d'**aller au-delà des fonctionnalités natives du Designer Webflow** pour donner vie à vos idées de conception. C'est là qu'intervient le code CSS personnalisé.
Le code personnalisé dans Webflow ouvre une porte vers l'infini en termes de personnalisation et d'optimisation de vos projets. Que vous cherchiez à intervenir sur **la mise en page, la typographie ou encore les animations**, le code CSS personnalisé peut être un excellent allié dans Webflow.
Dans cet article, on va donc explorer une sélection de snippets de code CSS simples mais soigneusement choisis pour élever vos projets. Chacun de ces snippets sert un but précis, vous permettant de faire quelque chose qui n’est pas faisable nativement dans le Designer Webflow. C’est parti !
## 7 codes CSS personnalisés pour vos projets Webflow
Mise en page, typographie, interactions dynamiques en CSS…
### Empêchez le scroll horizontal (avec du sticky)
L'un des problèmes assez courants en matière de mise en page est de gérer le débordement horizontal indésirable. Parfois, le contenu d'une section peut être plus large que la fenêtre du navigateur, provoquant un scroll horizontal gênant.
Pour résoudre ce problème, vous pouvez ajouter {overflow: hidden;} à la section ou au page-wrapper, mais il y a un inconvénient. **L’utilisation de {overflow: hidden;} rend la propriété CSS {position: sticky;} inutilisable** sur tout élément enfant (ce qui n’est pas très pratique).
Pour remédier à ça, vous pouvez simplement ajouter la propriété suivante à la place (typiquement, sur la classe page-wrapper) :
``L'ajout de** {overflow: clip;} à un élément empêchera le scroll horizontal tout en laissant possible l’utilisation de {position: sticky;}** sur les éléments enfants.
**Exemple d’utilisation :** Cette propriété CSS peut être systématiquement appliquée au page-wrapper pour prévenir le scroll horizontal non voulu.
### Ecrasez les styles par défaut de Webflow
Par défaut,** Webflow applique des styles de base à certains éléments HTML** comme les liens, les champs de formulaire ou encore les liens de la barre de navigation. Ça permet, par exemple pour les liens, de les rendre bien évidents même si vous oubliez de les styliser.
Cependant, il peut arriver que vous souhaitiez avoir davantage la main sur ces éléments et leur faire hériter le CSS de leur parent. Par exemple, si vous créez un card personnalisée avec un Link Block, vous n’aurez sûrement pas envie que les textes enfants soient soulignés (ce qui sera le cas avec les styles par défaut de Webflow).
Le snippet suivant vous permet donc d'**écraser les valeurs par défaut des éléments mentionnés **et de leur faire hériter le CSS de leur parent :
``En ajoutant ce snippet de code CSS, issu des styles globaux de [Client-First](/fr/tools/client-first) ([cliquez ici pour voir la documentation](https://finsweet.com/client-first/fr/intro)), vous ferez en sorte que les styles (couleur, taille, soulignement,…) soient hérités du parent. Et si vous voulez appliquer un style particulier, non hérité, vous pouvez toujours l'ajouter directement à l’élément.
**Exemple d'application : **Ce snippet est particulièrement utile si vous souhaitez supprimer les styles CSS par défaut de Webflow et gérer les éléments ciblés de façon plus globale.
### Évitez les mots (ou les ponctuations) solitaires
**Petite entorse ici :** il ne s’agit pas d’un snippet CSS, mais plutôt d’un raccourci clavier bien utile pour insérer un caractère spécial.
Lorsque vous éditez des textes, c’est parfois frustrant de voir** un tout petit mot (ou un symbole de ponctuation) isolé sur la dernière ligne. **Vous savez, le “?” tout seul sur sa ligne.
Pour éviter cela, vous pouvez **ajouter un espace insécable avec Shift + Espace** pour que les mots entourant cet espace reste toujours sur la même ligne.
**Exemple d'application : **C’est particulièrement utile d’en ajouter juste avant une ponctuation “?” ou “!” comme dans une FAQ par exemple.
### Équilibrez les différentes lignes d’un texte
Particulièrement pour des titres, dans la même veine que la situation précédente, vous pouvez parfois vous retrouver avec **des textes sur deux lignes dont la répartition du contenu n’est pas idéalement équilibrée**, ce qui peut-être frustrant.
Pour remédier à ça, vous pouvez utiliser **la propriété CSS suivante pour que la répartition du texte s’équilibre **sur toutes les lignes. La situation étant très spécifique, cela fait moins sens d’appliquer cette propriété à une classe spécifique, mais plutôt à un attribut personnalisé qui pourra être donné à un élément en particulier.
``**Exemple d'application : **Cette propriété CSS peut être particulièrement utile pour équilibrer la répartition de certains titres, afin de garder un design qui soit le mieux équilibré possible.
### Modifier la couleur de sélection
Lorsque les utilisateurs sélectionnent du texte sur votre site, il peut être intéressant de personnaliser la couleur de la sélection **pour correspondre à l’identité de marque **et faire la différence.
Pour le faire, vous pouvez utiliser le snippet de code CSS suivant :
``Ce bout de code CSS vous permet de **spécifier la couleur de fond et la couleur du texte lorsque du texte est sélectionné** par l'utilisateur.
**Exemple d'application : **Ce snippet peut être utile pour refléter l’identité de marque d’un site et faire en sorte de corresponde à son esthétique générale.
### Styliser un élément au survol de son parent
Dans le panneau de style, vous pouvez modifier les propriétés d’un élément lorsqu’il est survolé. Cependant, vous pouvez parfois avoir besoin de **modifier les propriétés d’un élément enfant lorsqu’un élément parent est survolé.**
Dans ce cas, vous pouvez passer par le panneau d’interaction de Webflow. Cependant, cela implique d’intégrer du code Javascript à votre projet, beaucoup plus lourd que **quelques lignes de CSS, **[**plus adaptées pour de petites interactions.**](/fr/blog/creer-animations-webflow-comparaison-entre-css-et-javascript)
Pour styliser un élément lorsque son parent est survolé, vous pouvez donc ajouter un snippet CSS comme suit :
``L’indication :hover indique que l’animation aura lieu au survol de l’élément parent, et le sélecteur children qui le suit immédiatement (sans virgule) indique que c’est lui qui sera stylisé.
**Exemple d'application : **Imaginons que, au hover d’un bouton personnalisé, vous vouliez passer le soulignement (créé avec un Div Block) de 0% à 100% de width, vous pouvez gérer l’animation de survol en ajoutant le snippet CSS suivant.
``
### Styliser un item spécifique d'une collection
Lorsque vous travaillez avec des collections dans Webflow, il peut être utile de **styliser un élément spécifique différemment des autres**. Voici un snippet pour y parvenir :
``Ce code CSS permet de** cibler un élément particulier d'une collection** (dans cet exemple, le troisième item) et d'appliquer des styles spécifiques à cet élément seulement (ou comme dans l’exemple, à un de ces enfants).
Alternativement, pour cibler plusieurs éléments à intervalles réguliers, vous pouvez adapter le snippet suivant :
``Partie un peu technique : le premier chiffre définit l’intervalle et le second définit la position de l’élément cible dans cet intervalle. Le code CSS précédent cible donc le second item de chaque interval de quatre : 2 (4*0 + 2), 6 (4*1 +2), 10 (4*2 +2), etc.
**Exemple d'application : **Ce snippet de code CSS peut être utile si vous avez une longue collection CMS à laquelle vous voudriez ajouter un peu de variation.
En ajoutant ces snippets de code CSS personnalisé, vous pouvez personnaliser en profondeur l'apparence ou le comportement de certains éléments de votre site Webflow. Ces astuces vous permettent d’avoir une flexibilité totale pour répondre à vos besoins de conception.
## Conclusion
Avec ces snippets de code CSS personnalisé à votre disposition, vous avez maintenant **la possibilité d'élargir vos horizons **en matière de conception sur Webflow. N’hésitez pas à les expérimenter pour découvrir comment ils peuvent enrichir vos projets.
Pour aller plus loin sur le sujet, découvrez aussi les articles suivants :
- [Comment modifier le soulignement par défaut de Webflow](/fr/blog/comment-modifier-le-soulignement-par-defaut-de-webflow-pour-une-meilleure-lisibilite)
- [Utiliser le Fluid Responsive dans Webflow grâce à Finsweet](/fr/blog/fluid-responsive-webflow)
- [Comment personnaliser facilement la scrollbar de votre site](/fr/blog/comment-creer-barre-scroll-progress-site-webflow-tutoriel)
[
](#)Lucas ClairetWebflow Team Lead[
](/fr/team/lucas-clairet)[
](https://www.linkedin.com/in/lucas-clairet-profile/)[
](https://x.com/lucasclairet)+1200 lecteurs
## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives.
[S'inscrire
](https://digidopfr.substack.com/subscribe)[Prévisualiser la Newsletter
](https://digidopfr.substack.com/)
## Articles qui devraient vous intéresser
DocumentationTout voir
### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026
[Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026.webp)NewsDéveloppementTout voir
### Webflow lance Source. Notre avis sur ce shift.
[Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.DocumentationIATout voir
### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA
[Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles
](/fr/blog)Les meilleurs projets web
commencent par une conversation[Discuter avec un expert
](/fr/contact)[Réserver un appel
](/fr/calendly)