- le texte par la propriété color
- le fond par la propriété background
- les bordures par la propriété border
On peut assigner les couleurs directement dans la balise d’un élément avec l’attribut style de cette façon :
Le code :
<p style="color: #FFF; background: olive;
border: 2px rgb(128, 0, 0) solid;">
Un paragraphe tout en couleur
</p>Résultat :
Un paragraphe tout en couleur
Une autre méthode, plus efficace, consiste à utiliser une feuille de style interne ou externe pour assigner une couleur à un élément globalement ou encore à un élément précis identifié à l’aide d’une classe ou d’un identificateur unique :
Le code CSS :
p.boite {
color: #FFF;
background: teal;
border: rgb(128, 0, 0) 4px solid;
}Le code (X)HTML :<p class="boite">Un paragraphe tout en couleur</p>
Les diverses méthodes pour assigner les couleurs
1. Nominale
Exemple : p { color: red; }
On utilise dans ce cas le nom d’une des 16 couleurs prédifinis en (X)HTML et en CSS. Les voici, avec l’équivalent hexadécimal. [CSS2 introduit une 17e couleur : ORANGE.
| black | #000000 | gray | #808080 |
| maroon | #800000 | red | #FF0000 |
| green | #008000 | lime | #00FF00 |
| olive | #808000 | yellow | #FFFF00 |
| navy | #000080 | blue | #0000FF |
| purple | #800080 | fuchsia | #FF00FF |
| teal | #008080 | aqua | #00FFFF |
| silver | #C0C0C0 | white | #FFFFFF |
| orange | #FFA500 |
2. RGB
Exemple : p { color: rgb(68,128,214); }
Ici, on utilise une valeur décimale de 0 à 255 pour déterminer la valeur de chacune des composantes primaires rouge, vert et bleu. Ce modèle permet de définir plus de 16 millions de variations possibles de couleurs (256 x 256 x 256).
2. Hexadécimale
Exemple : p { color: #FF092C; }
Ici, on utilise des caractères de 0 à F (0 à 9 + A à F, soit 16 valeurs possibles) pour déterminer la valeur de chacune des couleurs primaires rouge, vert et bleu. Chaque composante est défini par 2 caractères ; ce qui permet, pour chaque composante d’avoir 16 x 16 = 256 possibilités. On obtient ainsi le même nombre de variations qu’avec le modèle RGB, mais codé de manière plus compacte. Il existe aussi en CSS un façon raccourcie de coder les couleurs en hexadécimale sur 3 caractères au lieu de 6. En effet, lorsque les 2 valeurs de chacune des paires de caractères sont identiques, on peut n’utiliser que 3 caractères. Ainsi, #36A est identique à #3366AA.
Voir en complément :
- Choix de couleurs (décimales et hexadécimales)
- Traducteur décimal/hexadécimal
