Cette page suit toujours le même plan : le principe en une phrase, les étapes dans l'ordre exact, une démonstration interactive, le code, puis les points clés à retenir.
Utilisation de la démonstration
La démonstration avance uniquement quand vous cliquez sur « Suivant » ou « Précédent » : rien ne bouge tout seul. Un bouton « Lecture automatique » est disponible si vous préférez laisser les étapes défiler seules, à une vitesse que vous choisissez.
1. Vocabulaire à connaître avant de commencer
Chaque mot ci-dessous est utilisé exactement dans ce sens dans toute la page.
Mot
Définition précise
Balise
Un mot-clé entouré de chevrons, qui indique le type d'un élément de la page (par exemple <p> ou <h1>). La plupart des balises vont par paire : une balise ouvrante <p> et une balise fermante </p>.
Élément
Une balise ouvrante, tout ce qu'elle contient, et sa balise fermante. C'est l'unité de base de la page : un « nœud » de l'arbre DOM.
Attribut
Une information supplémentaire écrite dans la balise ouvrante, sous la forme nom="valeur" (par exemple class="intro").
Arbre DOM
La façon dont le navigateur représente la page HTML en mémoire : chaque élément est un nœud, relié à son élément parent et à ses éléments enfants.
Élément parent / enfant
Un élément qui en contient un autre est son parent ; l'élément contenu est son enfant.
Classe (attribut class)
Un attribut qui permet de donner le même nom à plusieurs éléments, pour les cibler ensemble en CSS. En CSS, on écrit un point devant : .intro.
Identifiant (attribut id)
Un attribut qui désigne un seul élément, unique dans toute la page. En CSS, on écrit un dièse devant : #principal.
Sélecteur CSS
Le texte qui indique à quels éléments de la page une règle CSS doit s'appliquer (par exemple p, .intro ou #principal).
Règle CSS
L'association entre un sélecteur et une ou plusieurs déclarations propriété: valeur;, entre accolades.
Cascade
Le mécanisme utilisé par le navigateur pour décider quelle règle appliquer, quand plusieurs règles concernent le même élément et la même propriété.
Précision d'un sélecteur
Une mesure de la « force » d'un sélecteur dans la cascade. Du moins précis au plus précis : sélecteur de balise, puis sélecteur de classe, puis sélecteur d'id.
2. L'exemple utilisé dans cette page
On utilise la même petite page tout au long de cette fiche : d'abord pour construire son arbre DOM, puis pour lui appliquer des règles CSS.
<!DOCTYPE html><html lang="fr"> <head> <title>Ma page</title> </head> <body> <h1>Bienvenue</h1> <p id="principal" class="intro">Bienvenue sur ce site.</p> </body></html>
Résultat à retrouver
Pour l'élément <p id="principal" class="intro">, une fois toutes les règles CSS appliquées : le texte s'affiche en vert (grâce à la règle la plus précise, #principal) et avec une taille de 20px (grâce à la dernière règle p écrite dans le fichier CSS).
3. La structure HTML : l'arbre DOM
3.1 — Principe, en une phrase
Principe
Le navigateur lit le code HTML dans l'ordre, et construit un arbre : chaque balise devient un nœud, placé comme enfant de la balise dans laquelle elle est écrite.
3.2 — Les étapes, dans l'ordre exact
On lit le code HTML du début à la fin, balise par balise.
Quand on rencontre une balise ouvrante, on crée un nouveau nœud dans l'arbre.
Ce nouveau nœud devient l'enfant de la dernière balise ouverte et non encore refermée (son « parent »).
Si la balise contient directement du texte, ce texte est rattaché à son nœud.
Quand on rencontre la balise fermante correspondante, on remonte au niveau du parent : les balises suivantes, au même niveau, seront ses enfants à lui, pas à l'élément qu'on vient de refermer.
On répète les étapes 2 à 5 jusqu'à la fin du code : le résultat est l'arbre DOM complet de la page.
3.3 — Démonstration interactive
nœud qui vient d'être ajouté
Étape 1 / 1
On construit l'arbre DOM de la page de l'exemple, ligne par ligne.
3.4 — Code HTML
<!DOCTYPE html><html lang="fr"> <head> <title>Ma page</title> </head> <body> <h1>Bienvenue</h1> <p id="principal" class="intro">Bienvenue sur ce site.</p> </body></html>
3.5 — Points clés à retenir
L'arbre DOM a toujours une seule racine : ici, c'est l'élément <html>.
<head> et <body> sont deux enfants de <html>, donc deux « frères » dans l'arbre : ni l'un ni l'autre ne contient l'autre.
La profondeur d'un nœud dans l'arbre correspond à son niveau d'imbrication dans le code : plus une balise est écrite « à l'intérieur » d'autres balises, plus son nœud est profond.
Un élément peut avoir plusieurs attributs en même temps, comme <p id="principal" class="intro"> : cela ne crée pas de nœuds supplémentaires, ce sont juste des informations rattachées au nœud p.
4. Appliquer du CSS : sélecteurs et cascade
4.1 — Principe, en une phrase
Principe
Pour chaque élément et chaque propriété, le navigateur retient la valeur de la règle CSS dont le sélecteur est le plus précis ; à précision égale, c'est la règle écrite en dernier dans le fichier qui l'emporte.
4.2 — Les étapes, dans l'ordre exact
On repère l'élément HTML dont on veut connaître le style (ici, <p id="principal" class="intro">).
On liste, dans l'ordre où elles sont écrites dans le fichier CSS, toutes les règles dont le sélecteur correspond à cet élément.
On choisit une propriété à étudier (par exemple color).
Parmi les règles qui définissent cette propriété, on garde celle dont le sélecteur est le plus précis, selon l'ordre : sélecteur de balise (le moins précis) < sélecteur de classe < sélecteur d'id (le plus précis).
Si plusieurs règles retenues ont exactement la même précision, c'est celle qui est écrite le plus loin dans le fichier (la dernière) qui l'emporte.
On répète les étapes 3 à 5 pour chaque propriété CSS concernée par l'élément.
4.3 — Démonstration interactive
règle en cours d'examenrègle retenuerègle écartéene concerne pas cette propriété
<p id="principal" class="intro">Bienvenue sur ce site.</p>
Aperçu réel de l'élément : sa couleur et sa taille changent ci-dessous au fil des étapes, selon la règle retenue à ce moment
Bienvenue sur ce site.
Étape 1 / 1
On détermine le style final appliqué à l'élément <p>, propriété par propriété.
4.4 — Niveau de précision des sélecteurs
Type de sélecteur
Exemple
Niveau de précision
Sélecteur de balise
p, h1, body
Le plus faible : cible tous les éléments de ce type.
Sélecteur de classe
.intro
Intermédiaire : plus précis qu'une balise, car cible seulement les éléments qui portent cette classe.
Sélecteur d'id
#principal
Le plus fort : cible un seul élément, unique dans la page.
Quand deux règles retenues ont le même sélecteur (donc le même niveau de précision), ce n'est pas la précision qui décide : c'est l'ordre d'écriture dans le fichier CSS. La règle la plus basse dans le fichier l'emporte.
Un même élément peut être concerné par plusieurs règles CSS en même temps : ce n'est pas un problème, c'est la cascade qui choisit laquelle appliquer, propriété par propriété.
La précision se compare dans cet ordre strict : balise < classe < id. Un sélecteur d'id l'emporte toujours sur un sélecteur de classe ou de balise, quel que soit l'ordre d'écriture.
À précision égale (par exemple deux règles avec le même sélecteur p), c'est uniquement l'ordre d'écriture qui compte : la dernière règle du fichier l'emporte.
Une règle qui ne définit pas une propriété donnée (par exemple une règle qui ne parle pas de color) n'entre pas en concurrence pour cette propriété : elle est simplement ignorée pour elle.