Exercice 5.1 · 5 min · 0 tentative
La boîte de crayons
🎯 Objectif
Colorer une page entière — fond, titre, texte — avec des noms de couleurs, et réviser au passage color et background-color.
📖 Exemple
La chorale annonce son concert d'automne. Fond doux, titre profond :
<h1>Concert d'automne</h1>
<p>Samedi 20 h, église du village.</p>
body {
background-color: lavender;
}
h1 {
color: teal;
}
Deux règles suffisent : background-color peint le fond d'un élément, color peint son texte. Et comme les valeurs sont des noms — lavender, teal — le code se lit comme une phrase.
Le CSS connaît environ 150 noms de couleurs, toujours en anglais, toujours en un seul mot. Beaucoup se déclinent avec light et dark : cyan a sa version lightcyan, blue sa version darkblue. C'est la boîte de crayons de base — vite ouverte, vite utilisée.
📝 Consigne
La ludothèque prépare l'affichette de sa soirée jeux. Le HTML est prêt, écris trois règles dans l'onglet CSS :
- Le fond de la page : la valeur lightcyan, un cyan pâle
- Le titre : la valeur darkblue, un bleu profond
- Les paragraphes : la valeur darkslategray, un gris ardoise foncé
Résultat attendu
Fond cyan très pâle, titre bleu foncé, deux paragraphes gris ardoise : l'affichette a pris des couleurs, et chacune porte son nom.
Ce qui est vérifié
- Donner un fond cyan pâle à la page
- Colorer le titre en bleu foncé
- Colorer les paragraphes en gris ardoise
- Terminer chaque déclaration par un point-virgule
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)