Introduction
Concevoir un site web peut intimider. Avec les bons outils et les bonnes connaissances, vous pouvez pourtant créer un site efficace et agréable à regarder. Comprendre le fonctionnement des propriétés CSS vous aide à faire progresser nettement vos compétences en conception. Les propriétés CSS sont au cœur de la conception web et vous donnent plus de contrôle sur l’apparence et le fonctionnement de votre page. Dans cet article, nous passons en revue 11 propriétés CSS à connaître et la façon de les utiliser sur Webflow pour créer le site qui vous convient, à vous ou à votre entreprise.
Qu’est-ce qu’une propriété CSS ?
CSS signifie « feuilles de style en cascade ». C’est un langage informatique qui définit l’apparence, l’ergonomie et la mise en forme des pages web. Il permet de contrôler la mise en page de plusieurs pages web à la fois. Les propriétés CSS sont les règles qui déterminent la façon dont les éléments HTML s’affichent sur une page web. On leur attribue des valeurs comme la couleur, la famille de polices, la largeur, la hauteur, la taille des marges ou le remplissage. Grâce aux propriétés CSS, vous pouvez personnaliser l’affichage d’un élément précis sur votre page, en modifiant sa taille ou sa couleur, ou en le masquant complètement.
Les propriétés CSS permettent aussi aux développeurs de créer des fonctionnalités interactives avec des bibliothèques JavaScript comme jQuery UI ou ReactJS. Les développeurs peuvent ainsi ajouter des effets visuels dynamiques, comme des animations ou des transitions, sans écrire de code directement en HTML.
1. Propriété « display », gérer l’affichage
La propriété CSS « display » configure l’affichage des éléments sur un site web. Elle accepte plusieurs valeurs :
- Block. Les éléments s’affichent les uns sous les autres et prennent toute la largeur disponible.
- Flex. Les éléments se positionnent sur un axe vertical ou horizontal, et vous pouvez les aligner et les justifier.
- Grid. Les éléments sont placés en lignes et en colonnes, dans une grille.
- Inline. La largeur et la hauteur des éléments dépendent de la taille du texte et de l’interligne.
- Inline-block. Le fonctionnement est le même qu’inline, mais vous pouvez définir une largeur et une hauteur.
- None. Les éléments ne sont pas visibles.
Par défaut, dans Webflow, tout nouvel élément inséré reçoit une propriété display avec la valeur « Block ».
2. Propriétés « width » et « height », gérer les tailles
La propriété « width » gère la largeur des éléments, et « height » leur hauteur.
Là aussi, les valeurs peuvent être exprimées en rem, px, ch, em, vw, vh ou auto.
Les propriétés « min-width » et « min-height » définissent des tailles minimales, « max-width » et « max-height » des tailles maximales.
3. Propriété « color », gérer la couleur des textes
La propriété « color » définit 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 définissez l’alignement des textes dans un bloc ou dans un élément de texte. Nativement, Webflow propose 4 alignements (text-align: left; text-align: right; text-align: center; text-align: justify;).
Avec un peu de code personnalisé, 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 la graisse des polices
La propriété « font-weight » définit la graisse, c’est-à-dire l’épaisseur, de vos polices.
Dans Webflow, selon la police utilisée, vous pouvez choisir des graisses comme normal, medium, bold, semibold, light, etc.
En CSS, vous pouvez utiliser ces mêmes noms ou, si vous préférez, des valeurs numériques (par exemple « 700 » pour bold).
6. Propriété « overflow », gérer le contenu qui dépasse
La propriété « overflow » gère l’affichage du contenu qui dépasse de l’élément auquel elle s’applique.
Les valeurs disponibles dans Webflow sont les suivantes :
- visible. Le contenu qui dépasse reste visible.
- hidden. Le contenu qui dépasse est masqué.
- scroll. Une barre de défilement, toujours visible, permet de faire défiler le contenu.
- auto. Une barre de défilement apparaît uniquement quand le contenu dépasse du bloc, pour afficher la partie masquée.
7. Propriété « background-color », gérer la couleur de fond
La propriété « background-color » définit la couleur de fond (en arrière-plan) d’un élément.
En code, elle accepte différentes valeurs :
- le nom de la couleur 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 l’interligne
Cette propriété CSS permet de personnaliser la hauteur de ligne, c’est-à-dire l’espace entre les lignes d’un texte.
Dans Webflow, les valeurs peuvent être en REM, PX, EM, VW, VH, % ou sans unité. Sans unité, la valeur multiplie la taille de la police. Par exemple, si votre police fait 1 rem et que la « line-height » vaut 2.6, la hauteur de ligne de votre texte sera de 2,6 rem.
9. Propriétés « margin » et « padding », gérer l’espacement
La propriété « margin » gère les marges extérieures entre les éléments. La propriété « padding » fonctionne de la même façon, pour les marges intérieures des éléments.
Leurs valeurs s’expriment en px, %, ch, em, rem, vw, vh et auto (uniquement pour « margin »).
Vous pouvez appliquer des marges sur certains côtés seulement avec « margin-top », « margin-bottom », « margin-left » et « margin-right ». Le principe est le même pour « padding » avec « padding-top », « padding-bottom », « padding-left » et « padding-right ».
10. Propriété « opacity », gérer l’opacité
La propriété CSS « opacity » applique plus ou moins de transparence à un élément. Ses valeurs sont numériques. Avec une opacité de 1, l’élément est entièrement visible. À 0.5, il est transparent à moitié. À 0, il devient invisible, car totalement transparent.
11. Propriété « font-size », gérer la taille des polices
La propriété « font-size » modifie 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 permettent de créer des sites web à la fois beaux et fonctionnels. Maîtriser les 11 propriétés CSS présentées dans cet article vous aidera à obtenir de très bons résultats sur Webflow. CSS est un langage polyvalent, n’hésitez donc pas à tester de nouvelles techniques à mesure que vous le prenez en main, et à demander de l’aide si besoin. Travailler avec les propriétés CSS peut aussi être amusant et enrichissant. Prenez plaisir à pratiquer, c’est ainsi que vous progresserez.
Vous savez maintenant pourquoi les propriétés CSS comptent pour votre site Webflow et comment les utiliser.
À vous de jouer.