Les 11 propriétés CSS à connaître sur Webflow et comment les utiliser

Introduction

Concevoir un site Web peut être intimidant. Pourtant, avec les bons outils et les bonnes connaissances, vous pouvez créer un site Web efficace et visuellement attrayant. Connaître le fonctionnement des propriétés CSS peut vous aider à faire passer vos compétences en conception au niveau supérieur. Les propriétés CSS sont une partie essentielle de la conception Web qui vous donne plus de contrôle sur l'apparence et le fonctionnement de votre page. Cet article fournira un aperçu de 11 propriétés CSS clés et comment les utiliser sur Webflow pour créer le site Web parfait pour vous ou votre entreprise.

Qu’est-ce qu’une propriété CSS ?

CSS signifie feuilles de style en cascade et est un type de langage informatique utilisé pour créer l'apparence, la convivialité et la mise en forme des pages Web. Il peut être utilisé pour contrôler la mise en page de plusieurs pages Web à la fois. Les propriétés CSS sont les règles spécifiques qui déterminent la façon dont les éléments HTML apparaissent sur une page Web. Ces propriétés se voient attribuer des valeurs telles que la couleur, la famille de polices, la largeur, la hauteur, la taille des marges et le remplissage. Avec les propriétés CSS, vous pouvez personnaliser la manière dont un élément individuel apparaît sur votre page Web en modifiant sa taille ou sa couleur ou en le supprimant entièrement de l'affichage.

Les propriétés CSS permettent également aux développeurs de créer des fonctionnalités interactives à l'aide de bibliothèques JavaScript telles que jQuery UI ou ReactJS. Cela permet aux développeurs d'ajouter des effets visuels dynamiques comme des animations ou des transitions sans avoir à écrire de code directement en HTML.

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

La propriété CSS "display" permet de configurer l'affichage des éléments sur un site web. Il en 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 sont définies 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, lorsqu'on insère un nouvel élément, celui-ci prend une propriété display avec une valeur "Block".

2. Propriété "width" & "height" : Pour 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 minimums et avec "max-width" et "max-height" des tailles maximum.

3. Propriété "color" : Pour 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.

4. 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 customs, vous pouvez ajouter d'autres valeurs comme text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; etc.

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 mesures telles que normal, medium, bold, semibold, light, etc.

En CSS, vous pouvez également utiliser ces mesures ou, si vous préférez, utiliser des valeurs numériques (par exemple : "700" pour bold).

6. 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

7. 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.

8. 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.

9. 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érieures 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".

10. 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.

11. 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.

Conclusion

Les propriétés CSS sont un outil puissant pour créer des sites Web beaux et fonctionnels. Savoir utiliser les 11 propriétés CSS décrites dans cet article peut vous aider à obtenir des résultats étonnants sur Webflow. CSS est un langage polyvalent, alors n'hésitez pas à expérimenter de nouvelles techniques au fur et à mesure que vous vous familiarisez avec. De plus, n'ayez pas peur de demander de l'aide en cas de besoin ! Enfin, travailler avec les propriétés CSS peut être amusant et enrichissant, alors profitez du processus et rappelez-vous que la pratique ne peut que vous rendre meilleures dans l’utilisation.

Vous avez maintenant toutes les clés en main pour comprendre pourquoi les propriétés CSS sont importantes pour votre site Webflow et comment les utiliser.

À vous de jouer !