Bonjour,

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 . Eh oui, correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur de fond de la page web.
Regardez très attentivement ce fichier CSS :

Code:

body /* On travaille sur la balise body, donc sur TOUTE la page */
{
  background-color: black; /* Le fond de la page sera noir */
  color: white; /* Le texte de la page sera blanc */
}

Hé, mais tu as indiqué une couleur de texte blanche à la balise , et tous les paragraphes

et titres

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.Non non, rassurez-vous, il n'y a pas eu de morts

En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur de cette balise prendront le même style.

Gné ?
C'est en fait simple à comprendre et intuitif. La balise , vous le savez, contient entre autres les balises de paragraphe

et de titre

.

SI j'applique une couleur de fond noire et une couleur de texte blanche à la balise , tous mes titres et paragraphes auront eux aussi une couleur de fond noire et un texte de couleur blanche... C'est ce phénomène qui s'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.

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 taille de texte de "1.3em" dans la balise , et tous vos titres et paragraphes seront de cette taille-là.

Voici un exemple où je vous montre comment on "annule" l'héritage pour que nos titres ne soient pas écrits en blanc. J'en ai profité pour créer une class "surligne" qui met le texte sur fond jaune pour donner une impression de surlignage.

Code:

body
{
  background-color: black;
  color: white; /* Toutes les balises contenues dans body verront leur texte coloré en blanc... */
}
h1
{
  color: red; /* ... sauf si je demande expressément de changer la couleur par la suite */
}
.surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */
{
  background-color: yellow;
  color: black; /* Le texte surligné sera écrit en noir, parce que le blanc sur fond jaune on voit rien ;o) */
}

Comme vous pouvez le constater, on n'a pas indiqué de couleur particulière pour les paragraphes (

), donc ils ont hérité de la couleur blanche. En revanche, le titre n'a pas hérité de la couleur blanche car on a écrit qu'on voulait qu'il soit en rouge.
La class "surligne" vous montre qu'on peut sans problème appliquer une couleur de fond à certains mots d'un texte. Et l'effet est plutôt sympa non, qu'en dites-vous ?