Cascade, Spécificité, Box Model & Unités
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre la cascade CSS
Origine, spécificité, ordre du code
2. Calculer la spécificité
La source n°1 des bugs CSS
3. Maîtriser le Box Model
content, padding, border, margin
4. Utiliser les bonnes unités
rem, em, px, %, vh/vw
5. Appliquer une typographie cohérente
font-family, line-height, font-size
Module 1
La cascade CSS
Module 2
Spécificité des sélecteurs
Module 3
Le Box Model
Module 4
Les unités CSS
Module 5
Typographie & Bonnes pratiques
La Cascade CSS
Pourquoi certains styles s'appliquent et d'autres non ?
L'algorithme qui détermine quel style s'applique quand plusieurs règles confluent
1
Origine
Navigateur vs Auteur vs Utilisateur
2
Spécificité
Plus un sélecteur est précis, plus il gagne
3
Ordre
La dernière règle écrite gagne
Styles du navigateur (User Agent)
Styles par défaut : liens bleus, marges sur h1, etc.
Priorité : ⭐ (la plus faible)
Styles de l'auteur (vous)
Vos fichiers CSS, styles inline, <style>
Priorité : ⭐⭐⭐ (la plus forte)
Styles de l'utilisateur
Préférences personnalisées du navigateur
Priorité : ⭐⭐
À spécificité égale, la dernière règle gagne
/* Même spécificité */
.bouton { color: blue; }
.bouton { color: red; }
// Résultat : red (la dernière gagne)
Attention : L'ordre dans le fichier CSS compte, pas l'ordre des classes dans le HTML !
Comment cibler les éléments HTML
Avant de parler spécificité, comprenons ce qu'on cible
div
Élément
Cible par le nom de la balise
p { }
h1 { }
div { }
.class
Classe
Cible par l'attribut class
.btn { }
.active { }
.card-title { }
#id
ID
Cible par l'attribut id
#header { }
#main-nav { }
⚠️ Unique par page
HTML
<div id="header">
<h1 class="title main">
Bienvenue
</h1>
</div>
CSS - Plusieurs façons de cibler
div { }
// L'élément div
#header { }
// L'ID "header"
.title { }
// La classe "title"
.main { }
// La classe "main"
Combiner les sélecteurs pour cibler précisément
Attributs
[type="text"]
// input avec type="text"
[href^="https"]
// commence par "https"
[class*="btn"]
// contient "btn"
Pseudo-classes
a:hover
// au survol
li:first-child
// premier enfant
input:focus
// quand focus
La Spécificité
⚠️ La source n°1 des bugs CSS
Chaque sélecteur a un score : (ID, Class, Element)
100
ID (#id)
#header, #menu
10
Class (.class)
.btn, .active, [type]
1
Element
div, p, h1, ::before
#menu .item
Spécificité : 1,1,0 = 110
nav ul li a.active
Spécificité : 0,1,4 = 14
✓ #menu .item
110 > 14
L'ID gagne toujours sur les classes !
Un ID est trop spécifique - difficile à surcharger
#header { color: blue; }
.header-special { color: red; }
// La classe ne peut PAS surcharger l'ID !
// 100 > 10
Bonne pratique : Utilisez des classes, pas des IDs pour le styling
Ignore TOUTES les règles de spécificité
#header { color: blue; }
.header { color: red !important; }
// Résultat : red
// !important gagne sur l'ID (100) !
⚠️ Danger : !important crée du code impossible à maintenir. Utilisez-le uniquement pour surcharger des styles tiers (librairies, CMS).
Le Box Model
Comprendre comment les éléments occupent l'espace
Content
Margin
Espace extérieur
Border
Bordure
Padding
Espace intérieur
Content
Contenu
La largeur = content uniquement (sans padding/border !)
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
}
// Largeur réelle = 200 + 40 + 10 = 250px !
⚠️ Problème : Les calculs deviennent un cauchemar !
La largeur inclut content + padding + border
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
// Largeur réelle = 200px ✓
// Content = 200 - 40 - 10 = 150px
Règle d'or : Appliquez border-box à TOUS les éléments dès le départ
Appliquer border-box à tout le document
*, *::before, *::after {
box-sizing: border-box;
}
✓ Tailwind
Le fait par défaut
✓ Bootstrap
Le fait par défaut
✓ Reset CSS
Modern Normalize
✓ Votre CSS
Ajoutez cette règle !
Dans Chrome DevTools :
Clic droit → Inspecter
Onglet Elements
Onglet Computed
Aperçu du Box Model :
Les Unités CSS
Choisir la bonne unité pour chaque usage
px
Pixels (absolu)
Fixe, ne s'adapte pas
rem
Root em (relatif)
✓ Recommandé pour le texte
em
Relatif au parent
Peut s'accumuler
%
Pourcentage
Relatif au parent
vh / vw
Viewport height/width
1vh = 1% de la hauteur écran
ch
Largeur du caractère "0"
Utile pour largeur de texte
❌ px (pixels)
• Taille fixe, rigide
• Ignore les préférences utilisateur
• Non accessible
• Zoom texte ne fonctionne pas
✓ rem (root em)
• Relatif à la racine (html)
• Respecte les préférences
• ✓ Accessible
• Zoom fonctionne parfaitement
/* L'utilisateur agrandit le texte dans son navigateur */
html { font-size: 100%; }
/* Par défaut : 16px → 1rem = 16px */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
.small { font-size: 0.875rem; }
// Si l'utilisateur zoom : 1rem devient plus grand
// Tout le texte s'adapte automatiquement ✓
Règle : Toujours utiliser rem pour les tailles de police
em (relatif au parent)
.parent { font-size: 20px; }
.child { font-size: 1.5em; }
// child = 20 × 1.5 = 30px
⚠️ S'accumule : em dans em = surprises !
rem (relatif à la racine)
html { font-size: 16px; }
.any { font-size: 1.5rem; }
// Toujours = 16 × 1.5 = 24px
✓ Prévisible, pas d'accumulation
Typographie & Bonnes Pratiques
Créer une hiérarchie visuelle cohérente
font-family
La police utilisée
font-size
Taille du texte
font-weight
Épaisseur (400, 700...)
line-height
Espacement des lignes
letter-spacing
Espacement des lettres
color
Couleur du texte
L'espacement entre les lignes de texte
❌ Trop serré (1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
✓ Optimal (1.5 - 1.7)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
body { line-height: 1.5; }
// Sans unité = multiplicateur de font-size
Une progression harmonieuse des tailles
/* Échelle basée sur 1rem = 16px */
h1 { font-size: 2.5rem; }
// 40px - Titres principaux
h2 { font-size: 2rem; }
// 32px - Sections
h3 { font-size: 1.5rem; }
// 24px - Sous-sections
body { font-size: 1rem; }
// 16px - Corps de texte
.small { font-size: 0.875rem; }
// 14px - Texte secondaire
Toujours prévoir des polices de secours
body {
font-family: "Inter",
system-ui,
-apple-system,
sans-serif;
}
1. Police cible
"Inter" - si disponible
2. Système
system-ui - police OS
3. Générique
sans-serif - toujours là
Cascade
Origine → Spécificité → Ordre
Spécificité
ID=100, Class=10, Element=1
Box Model
Toujours border-box !
Unités
rem pour le texte (accessibilité)
Typographie
line-height: 1.5, échelle cohérente, fallbacks
border-box sur tous les éléments
rem pour toutes les tailles de texte
Classes plutôt que IDs pour le styling
line-height: 1.5 minimum pour la lisibilité
!important seulement en dernier recours
Maîtrisez ces bases et le CSS n'aura plus de secrets !
Ouvrez les DevTools et expérimentez !