Syntaxe CSS
Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 2 sur 76.
En CSS, la syntaxe fait référence à l'ensemble des règles qui définissent comment le code CSS doit être écrit. Comprendre la syntaxe CSS est essentiel pour créer des feuilles de style bien structurées et fonctionnelles. Une règle CSS de base se compose d'un sélecteur et d'un bloc de déclaration.
Voici une décomposition simple :
- Sélecteur : Spécifie l'élément HTML que vous souhaitez styliser (par exemple p, div, img).
- Bloc de déclaration : Contient une ou plusieurs déclarations entourées d'accolades
{}.
- Déclaration : Se compose d'une propriété et d'une valeur, séparées par deux-points
:(par ex. color:green;). Chaque déclaration doit se terminer par un point-virgule (;).
- Propriété : L'attribut de style que vous souhaitez modifier (par exemple, color, font-size).
- Valeur : La valeur que vous souhaitez définir pour la propriété (par exemple, blue, 16px).
Par exemple :
p {
color: blue;
font-size: 16px;
}Dans cet exemple, p est le sélecteur, ciblant tous les éléments de paragraphe. Le bloc de déclaration contient deux déclarations : l'une définissant la couleur du texte sur bleu et l'autre définissant la taille de la police sur 16 pixels.
Défi
FacileOn vous donne un code HTML avec un élément de paragraphe et une règle CSS pour ce paragraphe. Modifiez la règle CSS pour changer la couleur du texte en red.
Aide-mémoire
La syntaxe CSS se compose d'un sélecteur et d'un bloc de déclaration :
- Sélecteur : Spécifie l'élément HTML à styliser (par exemple p, div, img)
- Bloc de déclaration : Contient des déclarations entourées d'accolades
{} - Déclaration : Propriété et valeur séparées par deux-points
:, se terminant par un point-virgule; - Propriété : L'attribut de style à modifier (par exemple, color, font-size)
- Valeur : La valeur de la propriété (par exemple, blue, 16px)
p {
color: blue;
font-size: 16px;
}Essayez vous-même
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Styling with CSS
4Les bases du texte
Couleur du texteFamille de policesTaille de policeGraisse de policeAlignement du texteDécoration du texteDéfi récapitulatif n°1Défi récapitulatif n°27Modèle de boîte - Partie 1
Qu'est-ce que le Modèle de boîte ?PaddingMargesBorduresLargeur et HauteurDéfi récapitulatif
5Couleurs et arrière-plans
Couleur d'arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n°1