📘 Chapitre 5 – Variables CSS

1. 🎯 Objectif pédagogique

Découvrir l’utilisation des variables CSS (Custom Properties) pour centraliser les valeurs réutilisables (couleurs, tailles, espacements) et faciliter la maintenance du code CSS.

2. 📚 Concepts abordés

  • Déclaration de variables CSS avec --nom-de-variable
  • Utilisation des variables avec la fonction var()
  • Portée des variables (globale dans :root ou locale dans un sélecteur)
  • Avantages des variables : maintenance et personnalisation rapide

3. 🧠 Explication théorique

Les variables CSS permettent de définir une valeur une seule fois et de la réutiliser dans tout le fichier CSS. Elles se déclarent généralement dans le sélecteur :root pour être accessibles partout :

:root {
  --couleur-principale: #3498db;
  --espacement: 20px;
}

On les utilise avec la fonction var() :

button {
  background-color: var(--couleur-principale);
  margin: var(--espacement);
}

Avantages :

  • Simplifie la gestion des thèmes (changer une seule valeur pour tout le site),
  • Améliore la lisibilité et l’entretien du CSS,
  • Peut être combiné avec des media queries.

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page avec un bouton et un bloc stylisés, en utilisant des variables pour gérer les couleurs et les marges.

Arborescence du projet :

mon_projet/
├── index.html
└── style.css

Étape 1 : HTML de base 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variables CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>Bienvenue</h1>
      <button>Cliquer ici</button>
    </div>
  </body>
</html>

Étape 2 : CSS avec variables 

:root {
  --couleur-principale: #3498db;
  --couleur-texte: white;
  --espacement: 15px;
  --rayon-bordure: 5px;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: var(--espacement);
}

button {
  background-color: var(--couleur-principale);
  color: var(--couleur-texte);
  padding: var(--espacement);
  border: none;
  border-radius: var(--rayon-bordure);
  cursor: pointer;
}

5. 🧾 Résumé et points-clés

  • Les variables CSS se déclarent avec --nom et s’appellent via var(--nom).
  • Centraliser les couleurs et tailles facilite les modifications globales.
  • Les variables peuvent être utilisées dans tout contexte CSS (couleur, marges, polices…).