Stylez vos pages !

Ajout de couleurs

En CSS, la propriété color permet de spécifier la couleur du texte alors que background-color permet d'indiquer la couleur de fond de l'élément. Les valeurs prises par ces propriétés correspondent aux différentes couleurs pouvant apparaître dans une page Web. Celles-ci sont souvent exprimées à l'aide d'un code hexadécimal découlant de leur synthèse additive. En effet, rappelons-nous que toute couleur peut être décomposée en trois couleurs d'intensité convenable: rouge, vert et bleu (Red, Green, Blue d'où RGB). Dès lors, les couleurs du web se définissent en terme de cumul de quantité de rouge, de vert et de bleu. Ainsi, par exemple, en mélangeant 80% de rouge avec 40% de vert, nous obtenons du orange:

Il existe deux manières d'indiquer une couleur en CSS:

• Par son nom
  Il existe une liste de couleurs reconnues par la plupart des navigateurs. Au nombre de 17, celles-ci peuvent être décrites par leur nom en anglais. Pour désigner une couleur par son nom, tapez-la dans la déclaration de la propriété CSS:
  
  
• Par le triplet RGB
  Il est possible de définir une couleur par son intensité de rouge, de vert et de bleu, exprimée en pourcentage ou en valeur absolue avec des chiffres compris entre 0 et 255. Ainsi, coder le orange se fait de la manière suivante:
  
  

Pour des raisons techniques, 255 est souvent l'unité de mesure correspondant aux valeurs de rouge, de vert et de bleu d'une couleur. Ceci est dû au fait que chaque intensité est encodée sur un octet, donc 8 bits pouvant encoder 2⁸=256 valeurs allant de 0 (=00000000) à 255 (=11111111). Pour rappel, en binaire, chaque nombre est représenté par la somme des puissances de 2 qui le composent:

Habituellement, l'intensité de rouge, vert et bleu est codée en un nombre hexadécimal. Dans cette écriture, chaque code de couleur est composée de trois groupes de deux chiffres représentant chacun la quantité de rouge, de vert et de bleu qui compose la couleur, exprimée en notation hexadécimale.

Dans cette écriture, les lettres A à F sont considérées comme des chiffres ! En effet, les codes hexadécimaux ne sont pas en base 10 (chiffres de 0 à 9) mais en base 16 (chiffres de 0 à F). Ainsi, un chiffre hexadécimal comme B signifie 11. En écriture hexadécimale, un entier est écrit comme la concaténation de ces chiffres et sa lecture s'effectue de droite à gauche. Sa valeur vaut la somme de ses chiffres affectés de poids correspondant aux puissances successives du nombre 16:

Il existe des palettes de couleurs disponibles sur le Web qui affichent les couleurs associées à leur code hexadécimal comme proposé par le site code-couleur.com. Pour s'en servir, il suffit de choisir une couleur puis de taper son code hexadécimal dans les CSS.

Afin d'ajouter du orange au titre du site de Marc, nous ajouterons les modifications suivantes au fichier journal.css:

Les décorations de texte permettent d'ajouter des effets à vos textes comme les souligner, les surligner, les barrer et même les faire clignoter dans certains navigateurs. Il suffit pour cela d'utiliser la propriété text-decoration affectée d'une des valeurs suivantes:

• line-through: texte barré d'un trait
• underline: texte souligné
• overline: texte surligné
• none: suppression d'une décoration héritée

Une autre manière de souligner un texte est d'utiliser une bordure, détail que nous aborderons en profondeur dans la section suivante. D'ici là, modifions la règle qui combine h1, h2 dans le fichier journal.css afin d'appliquer une bordure basse aux titres de la page de Marc:

Comme nous pouvons le constater, les bordures s'étendent sur toute la largeur de la page et ne se contentent pas de ne souligner que le texte. Pourquoi ? Réponse dans la prochaine section...