Syntaxe du CSS
Fait partie de la section Style avec 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 exemple, 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.
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 Style avec CSS
4Fondamentaux du texte
Couleur du texteFamille de policesTaille de policeGraisse de la 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 ?Espacement intérieurMargesBorduresLargeur et hauteurDéfi récapitulatif
5Couleurs et arrière-plans
Couleur d’arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n° 18Modèle de boîte – Partie 2
Dimensionnement des boîtesRayon de bordureDébordementOmbre de boîteDéfi récapitulatifEntraînez-vous par vous-même : Playground Web