Les feuilles de styles CSS
DEUXIÈME PARTIE
82
Marquer un mot avec une couleur de fond
Vous n’avez pas manqué de remarquer dans les exemples précédents la propriété
background-color (couleur d’arrière-plan), subrepticement introduite. Nous la
détaillerons dans le chapitre suivant, mais sachez d’ores et déjà qu’elle permet de
mettre en valeur un mot précis, un peu à la manière d’un marqueur de surlignement.
La procédure est simple, et consiste comme d’habitude à structurer d’abord le contenu. Nous traduisons l’importance de ce mot par la balise d’emphase
(emphase), à laquelle nous attribuons via CSS la couleur jaune. Par la même occasion, nous remplaçons son style italique par défaut en style normal (police droite).
Ces fantaisies visuelles sont bien entendu à consommer avec modération pour ne pas
imposer à vos visiteurs un « arbre de Noël » surchargé et du plus mauvais goût.
La notation raccourcie
Pour éviter l’accumulation de déclarations de polices, le W3C a prévu une notation
raccourcie des propriétés débutant par « font… ». Comme nous l’avons déjà évoqué
dans le chapitre d’introduction aux feuilles de styles, il est possible de synthétiser la
règle suivante :
CSS
em {
font-style: normal;
background-color: yellow;
}
HTML

Test de paragraphe montrant qu'une expression importante
peut être marquée par une simple couleur de fond.

CSS
p {
font-family: Arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 120%;
line-height: 140%;
}