13 propriétés CSS à connaître & comprendre dans Webflow

Dans ce petit guide, nous allons vous présenter 13 propriétés CSS importantes (à connaître et à comprendre) pour développer un site web.

PS : La liste est subjective et non exhaustive car il existe énormément de propriétés différentes (avec des valeurs différentes)

1. Propriété "display" : Gérer l'affichage

La propriété CSS "display" permet d'agencer l'affichage des éléments sur un site web. Il existe plusieurs valeurs pour ce type de style :

• Block : Les éléments s'affichent les uns en dessous des autres et prennent la largeur maximale possible
• Flex : Nous pouvons positionner nos éléments sur un axe vertical ou horizontal, les aligner et justifier
• Grid : Les éléments sont placés dans des lignes et colonnes (dans une grille)
• Inline : La largeur et la hauteur des éléments est définie par la taille du texte et la hauteur entre les textes
• Inline-block : Idem que inline à la différence que nous pouvons définir une largeur et une hauteur
• None : Les éléments ne sont pas visibles

Par défaut, dans Webflow (dans la majorité des cas), lorsqu'on insère un nouvel élément celui-ci prend une propriété display avec une valeur "Block".

2. Propriété "margin" et "padding" : Gérer l'espacement

La propriété "margin" permet de gérer les marges (extérieurs) entre les éléments. Pour "padding", c'est exactement la même chose mais pour les marges intérieurs des éléments.

Les valeurs de ces propriétés CSS sont des nombres en px, %, ch, em, rem, vw, vh et auto (uniquement pour "margin").

Nous pouvons appliquer des marges uniquement sur certains côtés avec "margin-top", "margin-bottom", "margin-left" et "margin-right". Idem pour le "padding" avec "padding-top", "padding-bottom", "padding-left" et "padding-right".

3. Propriété "width" & "height" : Gérer les tailles

La propriété "width" gère la largeur des éléments tandis que "height" gère la hauteur.

Là aussi nous pouvons donner des valeurs en rem, px, ch, em, vw, vh ou auto.

Avec les propriétés "min-width" et "min-height", nous pouvons définir des tailles minimum et avec "max-width" et "max-height" des tailles maximum.

4. Propriété "position" : Gérer la position des éléments

Modifier la position de vos éléments sur votre page grâce à cette propriété CSS.

Les différentes valeurs que vous pouvez appliquer à "position" sont : static, relative, absolute, fixed, sticky.

En savoir plus sur les différents types de position dans Webflow !

5. Propriété "font-weight" : Gérer le poids des polices

"font-weight" permet de définir le poids / l'épaisseur de vos polices.

Dans Webflow, vous pouvez définir en fonction de la police que vous utilisez des poids tel que normal, medium, bold, semibold, light, etc.

En CSS, vous pouvez également utiliser ces mots-clés ou bien utiliser des valeurs numériques (par exemple : "700" pour bold).

6. Propriété "color" : Gérer la couleur des textes

"color" permet de définir la couleur d'un texte. La valeur peut être le nom d'une couleur (en anglais) par exemple "yellow" pour jaune, une valeur hexadécimale (HEX) ou une valeur RGB.

7. Propriété "font-size" : Gérer la taille des polices

La propriété "font-size" permet de modifier la taille de vos polices. Dans Webflow, vous pouvez définir des tailles en rem, px, ch, vh, vw, %, etc.

Pourquoi utiliser les REM plutôt que les Pixels sur son site web !

8. Propriété "text-align" : Gérer l'alignement des textes

Avec "text-align", vous pouvez définir l'alignement des textes dans un bloc ou pour un élément de texte. Nativement dans Webflow, vous avez 4 possibilités d'alignement (text-align: left; text-align: right; text-align: center; text-align: justify).

Avec un peu de custom, vous pouvez ajouter d'autres valeurs comme text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; etc.

9. Propriété "line-height" : Gérer la hauteur entre les lignes

Cette propriété CSS offre la possibilité de personnaliser la taille (la hauteur) de la ligne de séparation entre des éléments de texte.

Les valeurs (dans Webflow) peuvent être des REM, PX, EM, VW, VH, % ou sans unité. Lorsqu'il n'y a pas d'unité, la valeur est un coefficient multiplicateur de la taille de la police. Par exemple, si votre police fait 1 rem et que la "line-height" est de 2.6, alors la séparation entre vos éléments de texte sera de 2,6rem.

10. Propriété "overflow" : Gérer ce qui dépasse du contenu

"overflow" permet de gérer l'affichage d'une partie du contenu ou d'un contenu qui dépasse de l'élément qui possède cette propriété css.

Les valeurs disponibles dans Webflow sont :

• visible : ce qui dépasse du contenu est visible
• hidden : ce qui dépasse du contenu est caché
• scroll : on peut scroller pour voir le contenu avec une scrollbar (tout le temps visible)
• auto : on peut scroller pour voir le contenu caché avec une scrollbar qui apparaît uniquement quand le contenu dépasse du bloc

Il existe également des propriétés pour ne cacher que ce qui dépasse sur un axe X (horizontal) ou Y (vertical) : Découvrir comment désactiver uniquement le scroll horizontal dans Webflow.

11. Propriété "background-color" : Gérer la couleur de fond

La propriété "background-color" permet de définir une couleur de fond (en arrière-plan) à un élément.

En code, vous pouvez donner différentes valeurs :

• la couleur du nom en anglais (yellow pour jaune par exemple)
• Une valeur hexadécimale
• Une valeur RGB
• Une valeur RGBA
• Une valeur HSLA
• etc.

12. Propriété "background-image" : Gérer l'image de fond

"background-image" offre la possibilité de mettre une image en arrière-plan d'un élément.

Dans Webflow, vous n'avez qu'à choisir l'image qui vous convient dans le Designer.

En code, il vous faudra stocker l'image quelque part et ajouter un lien vers l'url :

background-image: url('https://assets-global.website-files.com/615b648c9ce8937f3e6e7b70/61bb905629fddd70387d4d47_Logo-Digidop-Blanc.svg');

13. Propriété "opacity" : Gérer les opacités

Grâce à la propriété CSS "opacity", on peut appliquer plus ou moins de transparence à un élément. Les valeurs pour cette propriété sont numériques. Avec une opacité de 1, l'élément est visible totalement, une opacité de 0.5 l'élément est transparent de moitié et 0 invisible car totalement transparent.

Pour comprendre mieux ces propriétés et en découvrir de nouvelles, vous pouvez vous rendre sur le site MDN Web Docs.