← Mois 2 — CSS moderne & mise en pageSemaine 128 min

Cascade, spécificité, box model

Objectifs

Maîtriser : cascade CSS
Maîtriser : spécificité
Maîtriser : box model

Cours

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre cascade CSS, spécificité, box model en conditions réelles de conception web / web mobile.

La cascade décide quelle règle gagne : origine, spécificité, ordre. !important est un signal d’alarme, pas une stratégie.

Box model : content, padding, border, margin. box-sizing: border-box rend les largeurs prévisibles — standard de facto.

Unités : rem pour le texte/espacements liés à l’accessibilité, px pour borders fines, %/fr pour layouts fluides, dvh pour le mobile.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.

Atelier pratique

Passe en border-box et fixe une couleur de texte sombre lisible (#0b1f1c).

○ border-box○ #0b1f1c

<style>
      * { box-sizing: content-box; }
      .card { width: 200px; padding: 20px; border: 10px solid #1D4ED8; }
    </style>
    <div class="card">Largeur réelle = ?</div>

Évaluation

1. box-sizing: border-box inclut…

Précédente Suivante