Qu'est-ce que CSS ?

1. Le concept fondamental

Imaginez HTML comme l'squelette d'une maison (murs, portes, fenêtres) et CSS comme la décoration intérieure (couleurs, mobilier, disposition). Sans CSS, une page web est juste du texte brut gris sur blanc.

CSS ne concerne pas le contenu mais l'apparence. Il répond à la question : « Comment est-ce que ça ressemble ? »

2. Une brève histoire du CSS

L'avant-CSS

À l'origine, les propriétés visuelles étaient directement dans le HTML avec des balises comme <font>, <center>, <b>. C'était un mélange inextricableable de contenu et de présentation.

<!-- Méthode ancienne (à ne plus jamais faire) -->
<font color="red" size="3">Titre important</font>
<center>Texte centré</center>
<b>Texte gras</b>

CSS1 (1996)

La première recommandation CSS. Elle introduit les concepts fondamentaux :

• Sélecteurs de type (h1, p, a)
• Propriétés de base : color, font, margin, padding, text-align
• Le modèle de boîte simplifié
• Les feuilles de style externes

CSS2 (1998)

Ajouts majeurs :

• position (relative, absolute, fixed)
• z-index
• Les media queries (concept initial)
• Les pseudo-classes et pseudo-éléments
• Les animations (concept initial)

CSS3 (2011 — en évolution continue)

CSS3 a été découpé en modules indépendants, ce qui permet une évolution plus rapide. C'est la version que nous utilisons aujourd'hui :

• Flexbox et Grid
• Animations et transitions
• Media queries avancées
• Variables CSS (Custom Properties)
• Fonctions : calc(), clamp(), min(), max()
• Propriétés logiques
• Nesting CSS
• @layer (Cascade Layers)

3. Pourquoi séparer HTML et CSS ?

C'est la question la plus importante de ce chapitre. La séparation n'est pas une convention arbitraire — c'est une architecture logicielle.

Sans séparation (tout dans le HTML)

<h1 style="color: blue; font-size: 24px; margin-bottom: 10px;">Titre</h1>
<p style="color: gray; line-height: 1.6; font-family: Arial;">Paragraphe</p>
<h1 style="color: blue; font-size: 24px; margin-bottom: 10px;">Autre titre</h1>
<p style="color: gray; line-height: 1.6; font-family: Arial;">Autre paragraphe</p>

Avec séparation (HTML + CSS séparés)

<!-- HTML : structure -->
<h1 class="titre">Titre</h1>
<p class="texte">Paragraphe</p>

/* CSS : présentation */
.titre {
  color: blue;
  font-size: 24px;
  margin-bottom: 10px;
}

.texte {
  color: gray;
  line-height: 1.6;
  font-family: Arial;
}

4. Comment un navigateur lit une feuille CSS

Lorsque tu charges une page web, voici ce qui se passe réellement :

Le pipeline de rendu

HTML ──→ DOM Tree
              │
CSS  ──→ CSSOM
              │
              ▼
       Render Tree
              │
              ▼
         ┌────┴────┐
         │  Layout  │  (calcul des positions et tailles)
         └────┬────┘
              │
              ▼
         ┌────┴────┐
         │  Paint   │  (dessin des pixels)
         └────┬────┘
              │
              ▼
         ┌────┴────┐
         │Composite │  (assemblage des couches)
         └─────────┘

Étape par étape

1. Le navigateur parse le HTML → DOM Tree

Le navigateur lit le fichier HTML et construit le DOM (Document Object Model), un arbre d'objets représentant chaque élément.

2. Le navigateur parse le CSS → CSSOM

En parallèle, il lit toutes les feuilles de styles (externes, internes, inline) et construit le CSSOM (CSS Object Model), un arbre de styles calculés.

3. DOM + CSSOM = Render Tree

Les deux arbres fusionnent pour former le Render Tree. Cet arbre contient uniquement les éléments visibles avec leurs styles calculés.

4. Layout (Reflow)

Le navigateur calcule la position exacte et la taille de chaque élément. Si tu modifies une propriété qui affecte la mise en page (margin, width, position...), cela déclenche un reflow (recalcul complet).

5. Paint (Repaint)

Le navigateur dessine les pixels : couleurs, bordures, ombres, texte. Si tu modifies color ou background, cela déclenche un repaint (redessin局部).

6. Composite

Les différentes couches sont assemblées pour former l'image finale visible à l'écran.

5. La syntaxe de base de CSS

Un bloc CSS suit toujours la même structure :

sélecteur {
  propriété: valeur;
  propriété: valeur;
}

Exemple concret :

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

• Sélecteur : l'élément cible (h1)
• Propriété : ce qu'on veut modifier (color)
• Valeur : la valeur assignée (blue)
• Déclaration : la ligne complète (color: blue;)
• Bloc de déclarations : tout ce qui est entre { et }

6. Erreurs fréquentes des débutants

/* FAUX */
h1 {
  color: blue    /* Le navigateur peut planter */
  font-size: 24px
}

/* CORRECT */
h1 {
  color: blue;
  font-size: 24px;
}

/* FAUX — CSS n'accepte pas le underscore */
.text_bg { background: red; }

/* CORRECT */
.text-bg { background: red; }

/* FAUX */
div { text-color: red; }

/* CORRECT */
div { color: red; }

/* FAUX — text-size n'existe pas */
p { text-size: 16px; }

/* CORRECT */
p { font-size: 16px; }

7. Bonnes pratiques dès le début

/* ✅ Bonne pratique */
.titre {
  color: #1e293b;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.sous-titre {
  color: #64748b;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

8. Mini-défi

9. Projet d'application

10. Révision