Le relooking
Cet article de blog est tout nu. Sors le kit de peinture et donne-lui du style !
Tu viens de découvrir les sélecteurs CSS, les propriétés de texte et les couleurs. C'est le moment de sortir ton kit de customisation : tu vas transformer une page toute grise en quelque chose d'agréable à lire.
L'article est déjà écrit en HTML (tu peux le consulter via l'onglet "HTML"). Toi, tu ne touches qu'au CSS. Un peu comme changer le skin d'un personnage sans modifier ses stats.
Ce qu'on te demande
Complète le CSS dans l'éditeur pour rendre cet article lisible et agréable. Voici le minimum :
- Définis une police (
font-family) pour tout le texte - Donne une bonne taille au titre principal (
font-sizesur le h1) - Ajoute de l'interligne aux paragraphes (
line-height) - Utilise au moins 2 couleurs différentes (
color) - Mets un fond de couleur (
background-color) quelque part - Utilise text-align pour aligner un élément (centrer le titre, par exemple)
Tu peux voir le résultat changer en temps réel dans l'aperçu. Et si tu veux voir le HTML, clique sur l'onglet "HTML".
Astuce : pour les couleurs, tu peux utiliser des noms simples comme tomato, steelblue, darkslategray... ou des codes hex comme #2563eb. Teste, casse, recommence : c'est comme ça qu'on débloque de nouvelles compétences.
Pourquoi c'est important : la typographie et les couleurs représentent 80% de l'impression visuelle d'un site. Un bon font-family + un bon line-height + des couleurs cohérentes, et ta page passe de "brouillon" à "pro".