Couleur de fond
Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui,<body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.
Regardez très attentivement ce fichier CSS :
/* On travaille sur la balise body, donc sur TOUTE la page */ body { background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page sera blanc */ } |
Voici le rendu de ce code en figure suivante.
Texte en blanc sur fond noir
Eh mais tu as demandé à ce que le texte de la balise <body> soit écrit en blanc, et tous les paragraphes <p> et titres <h1> ont pris cette couleur. Comment cela se fait-il ?
Je voulais justement profiter de l'occasion pour vous en parler. Ce phénomène s'appelle l'héritage. Je vous rassure tout de suite, personne n'est mort.
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le même style.
C'est en fait simple à comprendre et intuitif. La balise <body>, vous le savez, contient entre autres les balises de paragraphe <p> et de titre <h1>.
Si j'applique une couleur de fond noire et une couleur de texte blanche à la balise <body>, tous mes titres et paragraphes auront eux aussi un arrière-plan de couleur noire et un texte de couleur blanche… C'est ce phénomène qu'on appelle l'héritage : on dit que les balises qui se trouvent à l'intérieur d'une autre balise « héritent » de ses propriétés.
C'est d'ailleurs de là que vient le nom « CSS », qui signifie « Cascading Style Sheets », c'est-à-dire « Feuilles de style en cascade ». Les propriétés CSS sont héritées en cascade : si vous donnez un style à un élément, tous les sous-éléments auront le même style.
Cela veut dire que TOUT le texte de ma page web sera forcément écrit en blanc ?
Non, pas obligatoirement. Si vous dites par la suite que vous voulez vos titres en rouge, ce style aura la priorité et vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulier (comme on l'a fait tout à l'heure), alors vos titres hériteront de la couleur blanche.
Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées : vous pouvez par exemple demander une mise en gras dans la balise <body> et tous vos titres et paragraphes seront en gras.
On a tendance à croire qu'on ne peut modifier que la couleur de fond de la page. C'est faux : vous pouvez changer le fond de n'importe quel élément : vos titres, vos paragraphes, certains mots… Dans ce cas, ils apparaîtront surlignés (comme si on avait mis un coup de marqueur dessus).
Vous vous souvenez par exemple de la balise <mark> qui permet de mettre en valeur certains mots ? Utilisons-la à nouveau ici :
<h1>Qui a éteint la lumière ?</h1>
<p>Brr, il fait tout noir sur ce site, c'est un peu <mark>inquiétant</mark> comme ambiance non vous trouvez pas ?</p> |
Par défaut, le texte s'affiche sur un fond jaune. Vous pouvez changer ce comportement en CSS :
body { background-color: black; color: white; }
mark { /* La couleur de fond prend le pas sur celle de toute la page */ background-color: red; color: black; } |
Sur le texte de la balise <mark>, c'est la couleur de fond rouge qui s'applique. En effet, même si le fond de la page est noir, c'est la propriété CSS de l'élément le plus précis qui a la priorité (figure suivante).
Un texte surligné en rouge sur un fond noir
Le même principe vaut pour toutes les balises HTML et toutes les propriétés CSS ! Si vous dites :
… on pourrait penser qu'il y a un conflit. Le texte important fait partie d'un paragraphe, quelle taille lui donner ? 1.2 em ou 1.4 em ? Le CSS décide que c'est la déclaration la plus précise qui l'emporte : comme <strong> correspond à un élément plus précis que les paragraphes, le texte sera écrit en 1.4 em.
Créé avec HelpNDoc Personal Edition: Générateur d'aides Web gratuit