Auteur: Jérôme Forget. Publié le 12 décembre 2006.
La capacité qu'offre les feuilles de style CSS de pouvoir modifier les couleurs d'une page Web est sans doute le premier élément qui m'a jadis attiré vers CSS. En les utilisant judicieusement, les couleurs peuvent enrichir la présentation d'un document.
Disons que vous voulez tous les titres h1 en vert, tous les h2 en bleu, les h3 en rouge foncé. La façon la plus simple de modifier la couleur d'un élément avec CSS est celle-ci :
h1 {color: green};
h2 {color: blue};
h3 {color: maroon};
Il suffit de tirer profit des différents sélecteurs CSS pour modifier la couleur d'un élément dans un certain contexte, la couleur d'un titre seulement dans certains cas, et ainsi de suite. Voici quelques exemples :
p.intro {color: grey};
#menu a {color: white};
b, strong {color: black};
p.note a:link {color: red};
Évidemment, CSS ne possède pas qu'un jeu de 16 couleurs. Il est possible d'utiliser d'autres types de couleurs, comme #FF0000 ou rgb(100%,80%,0%). Le tableau suivant présente les couleurs nommées et leur équivalent RGB en pourcentage, RGB en valeur numérique, hexadécimal et hexadécimal court :
| Couleur | Pourcentage | Numérique | Hexadécimal | Hex |
|---|---|---|---|---|
| red | rgb(100%,0%,0%) | rgb(255,0,0) | #FF0000 | #F00 |
| orange | rgb(100%,40%,0%) | rgb(255,102,0) | #FF6600 | #F60 |
| yellow | rgb(100%,100%,0%) | rgb(255,255,0) | #FFFF00 | #FF0 |
| green | rgb(0%,100%,0%) | rgb(0,255,0) | #008000 | |
| blue | rgb(0%,0%,100%) | rgb(0,0,255) | #0000FF | #00F |
| aqua | rgb(0%,100%,100%) | rgb(0,255,255) | #00FFFF | #0FF |
| black | rgb(0%,0%,0%) | rgb(0,0,0) | #000000 | #000 |
| fuchsia | rgb(100%,0%,100%) | rgb(255,0,255) | #FF00FF | #F0F |
| gray | rgb(50%,50%,50%) | rgb(128,128,128) | #808080 | |
| lime | rgb(0%,100%,0%) | rgb(0,255,0) | #00FF00 | #0F0 |
| maroon | rgb(50%,0%,0%) | rgb(128,0,0) | #800000 | |
| navy | rgb(0%,0%,50%) | rgb(0,0,128) | #000080 | |
| olive | rgb(50%,50%,0%) | rgb(128,128,0) | #808000 | |
| purple | rgb(50%,0%,50%) | rgb(128,0,128) | #800080 | |
| silver | rgb(75%,75%,75%) | rgb(192,192,192) | #C0C0C0 | |
| teal | rgb(100%,50%,50%) | rgb(0,128,128) | #008080 | |
| white | rgb(100%,100%,100%) | rgb(255,255,255) | #FFFFFF | #FFF |
La couleur d'arrière-plan d'un élément peut être modifiée grâce à la propriété background. Nous reviendrons sur les couleurs et les images d'arrière-plan dans un autre article.