Couleurs CSS
Vous savez cibler des éléments. Maintenant, peignez-les. La première compétence couleur est simple : définir la couleur du texte avec la propriété color. Fonds, dégradés et maths complètes de la couleur viendront plus tard — aujourd’hui, une couleur de premier plan lisible et réutilisable.
Que fait color ?
La propriété color définit la couleur de premier plan — surtout celle des lettres. Le navigateur utilise aussi cette couleur calculée pour ce qui suit currentColor (bordures, certains SVG, décorations). Elle ne remplit pas la boîte derrière le texte ; c’est background-color (modules suivants).
Couleurs nommées en un coup d’œil
CSS fournit beaucoup de couleurs nommées — des mots-clés comme teal et navy. Mémorisez d’abord un petit jeu du quotidien. Hex précis et rgb() arrivent dans la leçon Valeurs de couleur.
📊 Couleurs nommées du quotidien
| Nom | Sensation | Usage typique |
|---|---|---|
black / white |
Contraste maximal | Corps de texte ou toile de page (avec soin) |
navy / teal |
Accents de marque calmes | Liens, titres, notes |
gray / silver |
Texte secondaire discret | Légendes, libellés atténués |
transparent |
Totalement transparent | Masquer une bordure sans retirer la propriété |
Couleur de texte avec un nom
Écrivez une déclaration normale : propriété color, valeur une couleur nommée. Commencez par le paragraphe pour que la page ait une intention.
Couleur nommée sur le texte du paragraphe
cssp {
color: teal;
}Lire le résultat
Chaque <p> correspondant dessine ses lettres en teal. Le nom de la propriété est toujours color — pas text-color ni font-color.
Les titres peuvent différer du corps
Souvent vous voulez un titre plus sombre et un paragraphe plus calme. Sélecteurs séparés, couleurs séparées.
Accent de titre vs corps
cssh1 {
color: navy;
}
.lead {
color: gray;
}Habitude de design
Des titres à fort contraste aident le balayage. Un texte secondaire doux évite que les légendes crient. Gardez quand même assez de contraste pour lire.
La couleur s’hérite
Les enfants reprennent le color du parent sauf s’ils en définissent un. C’est pourquoi une couleur sur un conteneur peut thématiser tout un bloc de texte.
Couleur héritée sur un bloc note
css.note {
color: maroon;
}Qu’est-ce qui s’hérite ?
Dans <div class="note">…</div>, paragraphes et spans restent maroon jusqu’à ce qu’une règle plus forte les change. L’héritage est une fonctionnalité — pas un bug.
currentColor suit le texte
currentColor signifie « utilise le color calculé de l’élément ». Utile quand une bordure ou une icône doit rester synchronisée avec le texte.
La bordure suit le texte via currentColor
css.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}Pourquoi s’en soucier ?
Changez color une fois — la bordure suit. Pas de second teal codé en dur à synchroniser.
Carte thématisée (tout ensemble)
Combinez couleur de conteneur, override plus calme sur l’enfant, et accent currentColor.
Thème de carte avec override + currentColor
css.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}
.card .muted {
color: gray;
}color n’est pas le fond
Les débutants tapent souvent color quand ils voulaient le remplissage derrière le texte. Séparez dès le premier jour :
color→ texte (premier plan)background-color→ la boîte peinte derrière le contenu (bientôt)
Essayez vous-même
- Page avec un titre, un
<p class="lead">et un<div class="note">avec un court paragraphe. - Mettez
h1 { color: navy; },p { color: teal; }et.note { color: maroon; }— vérifiez chaque zone. - Ajoutez
.badge { color: teal; border: 2px solid currentColor; }sur un petit span — la bordure doit matcher le texte. - Dans
.card, navy sur la carte etcolor: graysur.muted— l’override enfant gagne pour cette ligne. - Optionnel :
color: transparentsur une étiquette décorative — le texte disparaît, l’espace de mise en page reste.
Erreurs fréquentes
- Peindre le fond de la boîte avec
color— utilisezbackground-colorplus tard - Inventer des noms (
lightishblue) — restez sur de vrais mots-clés CSS ou attendez hex/rgb - S’attendre à ce que toute propriété hérite comme
color— beaucoup ne le font pas - Sauter tout de suite aux longues chaînes hex avant que les couleurs nommées soient naturelles
- Ignorer le contraste (gris pâle sur blanc) — joli mais illisible
En bref
colordéfinit la couleur de texte au premier plan- Les couleurs nommées (
teal,navy,maroon, …) suffisent au début - Les enfants héritent de
colorjusqu’à ce qu’ils le remplacent currentColorréutilise la couleur de texte calculée pour bordures et proches- Formats profonds (hex, rgb, hsl) pour Valeurs de couleur ; fonds pour plus tard
- Pratiquez avec titre / lead / note jusqu’à ce que la propriété soit automatique
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut