Exercice 4.3 · 6 min · 0 tentative
La classe, ton outil n°1
🎯 Objectif
Marquer certains éléments avec une classe, puis les styler tous d'un coup.
📖 Exemple
Le programme d'un festival : deux concerts sont complets, une classe les marque, une seule règle les surligne — le code, et ce que le navigateur en fait :
<ul>
<li>Vendredi : Les Décibels</li>
<li class="complet">Samedi : DJ Vortex</li>
<li class="complet">Dimanche : Chorale du collège</li>
</ul>
.complet {
background-color: hotpink;
}
Pourquoi un point ? Dans le HTML, la classe se pose avec l'attribut class="complet" — sans point. Dans le CSS, le point devant le nom dit au navigateur « vise les éléments qui portent cette classe ». Pose-la sur deux éléments ou sur cinquante : une seule règle les habille tous.
♿ Remarque le choix : une couleur vive sert de fond sous un texte foncé — le même rose en couleur de texte sur fond blanc serait illisible.
📝 Consigne
Ici, tu touches aux deux onglets.
Dans l'onglet HTML :
- Ajoute une classe nommée importante à la 2e ligne de la liste (« Préchauffe le four… »)
- Pose la même classe sur la 4e ligne (« Ne dépasse jamais… ») — les deux autres lignes restent nues
Dans l'onglet CSS :
- Écris la règle qui vise cette classe, avec la propriété
background-coloret la valeur gold, un jaune or
Résultat attendu
Les deux mises en garde apparaissent surlignées en jaune or. Les deux autres lignes restent normales.
Ce qui est vérifié
- Poser la classe sur la mise en garde du four
- Poser la classe sur la mise en garde de la cuisson
- Poser la classe sur exactement deux lignes
- Écrire une règle de classe en CSS
- Surligner les mises en garde en or
- Terminer la déclaration par un point-virgule
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)