DébutantNon commencé

Exercice 6.2 · 6 min · 0 tentative

Adieu le style inline

🎯 Objectif

Reconnaître le style inline... et le rapatrier là où le CSS doit vivre : dans la feuille.

📖 Exemple

Un bénévole de la chorale a stylé son annonce directement dans le HTML :

<p style="color: teal">Répétition jeudi à 20 h.</p>
<p style="color: teal">Concert samedi à l'église.</p>

Ça fonctionne — le texte est bien turquoise. Et pourtant, ce code a deux problèmes :

  1. Il se répète. La même instruction est recopiée sur chaque balise. Dix annonces demain ? Dix copies. Un changement de couleur ? Dix corrections.
  2. Il est intouchable depuis la feuille. Le style inline pèse plus lourd que n'importe quelle règle : tant qu'il est là, ton style.css peut bien crier color: crimson, personne ne l'écoute.

La version saine tient en une règle :

p {
  color: teal;
}

Le HTML redevient pur contenu, la présentation vit dans la feuille — chacun son métier, comme depuis le module 4.

📝 Consigne

Le programme du samedi a été stylé à coups d'attributs style — trois fois la même instruction. Nettoie :

  1. Dans l'onglet HTML : supprime les trois attributs style en entier
  2. Dans l'onglet CSS : écris une seule règle qui vise les paragraphes avec la propriété color et la valeur navy
  3. Compare l'aperçu : le rendu doit être identique à l'original

Résultat attendu

Rien ne bouge à l'écran — les trois horaires restent bleu marine. Mais le HTML est redevenu propre, et la couleur se change désormais à un seul endroit.

Ce qui est vérifié

  • Supprimer les trois attributs style du HTML
  • Écrire la règle des paragraphes dans la feuille
  • Garder les horaires en bleu marine
  • Écrire un code HTML bien formé
  • Respecter la structure de la page (doctype, head, body)

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé