Les variables CSS

🎯 Objectif

Écrire une valeur une seule fois, puis la réutiliser partout avec var().

📖 Exemple

L'affiche de la fête du village, dont le rose n'est déclaré qu'à un seul endroit :

<h2>Fête du village</h2>
<p>Samedi dès 11 h : concerts, jeux et grillades.</p>
<p class="badge">Entrée libre</p>

:root {
  --rose-fete: #d45e95;
}

h2 {
  background-color: var(--rose-fete);
}

.badge {
  background-color: var(--rose-fete);
}

Pourquoi ce détour ? Deux gestes, jamais plus. Déclarer : dans :root — la racine de la page, visible partout — un nom qui commence obligatoirement par deux tirets, puis la valeur. Relire : la fonction var(), avec le nom complet entre parenthèses, tirets compris. Au moment d'afficher, le navigateur remplace var(--rose-fete) par #d45e95 — rien de magique, un remplacement. L'intérêt : la valeur ne vit qu'à UN endroit. Change le rose dans :root, et le bandeau ET le badge basculent ensemble — c'est la télécommande du design, et c'est comme ça que naissent les thèmes clair/sombre. D'où le conseil : nomme tes variables par leur rôle, pas par leur apparence.

📝 Consigne

Le blog de Lou veut sa couleur d'accent — un vert foncé, parfait pour du texte sur fond clair. Le HTML est fourni ; dans l'onglet CSS, écris trois blocs :

1. Un bloc :root qui déclare une variable nommée --couleur-accent, de valeur #226347
2. Une règle sur le sélecteur h1 : sa propriété color va chercher la variable avec var()
3. Une règle sur la classe .signature : la même variable, relue une deuxième fois