• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/01/2023

Ajoutez de la couleur et un fond

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Changez la couleur du texte avec color

La propriété CSS qui permet de modifier la couleur du texte, c'est color.

Vous l'avez déjà utilisée en lui appliquant en valeur le nom d'une couleur en anglais :

h1 {
color: blue;
}

De nombreux noms de couleurs sont supportés par les navigateurs mais il existe d'autres manières d'indiquer une couleur en CSS :

  1. Sous forme hexadécimale (6 chiffres précédés d'un #). Exemple :  color: #FFC8D3; 

  2. En notation RGB (pour Red Green Blue en anglais). Exemple :  color: rgb(250,25,118);. Notez qu'on peut ajouter la notion d'opacité (ou de transparence) avec la notation RGBA, où la dernière valeur correspond à l'opacité :  color: rgba(250,25,118, 0.5); 

Appliquez une couleur d'arrière-plan avec background-color

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 vaut mieux l'appliquer à 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 :

body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}

Et on obtient :

Pour appliquer une couleur pour le texte et le fond, on indique la couleur directement dans la balise body.

On a 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 ça se fait ?

La balise  <body>  contient, entre autres, les balises de paragraphe  <p>  et de titre  <h1>. Si on applique à la balise <body> une couleur de fond noire et une couleur de texte blanche, tous les titres et paragraphes seront eux aussi en blanc sur fond noir.

Cela veut dire que TOUT le texte de ma page web sera forcément écrit en blanc ?

Non, pas obligatoirement. Si par la suite, vous voulez vos titres en violet par exemple, il faudra le préciser :

body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
h1 {
color: purple;
}

Ajoutez une image de fond avec  background-image

Une "image de fond" ne s'applique pas forcément à la page entière. On peut aussi mettre une image de fond derrière des titres, ou des paragraphes uniquement.

Appliquez une image de fond derrière un élément HTML

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner l'adresse indiquant où se trouve l'image de fond. Elle peut être écrite en absolu (http://…) ou en relatif (fond.png).

Voyons tout de suite à quoi ça ressemble !

On écrit dans le fichier HTML :

<body>
<div class="banniere">
<h1>Mon blog</h1>
</div>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>

Puis dans le fichier CSS :

body {
font-family: sans-serif;
margin: 0; /* Vous ne connaissez pas encore cette propriété mais elle permet de s'assurer que nos éléments prennent bien toute la largeur de la page */
}
.banniere {
padding: 100px; /* Vous ne connaissez pas encore cette propriété mais elle permet d'ajouter de l'espace dans notre élément*/
background-image: url('paysage.jpg');
}
h1 {
color: white;
text-align: center;
}

Et on obtient :

Dans le fichier HTML, on a mis la balise du titre à l'intérieur d'une balise div qu'on a nommée banniere. Dans le fichier CSS, on a ajouté sur la classe banniere, une image qu'on place en fond grâce à la propriété background-image.
Une image en fond du titre

C'est bien beau tout ça, mais l'image apparaît floue : elle n'est pas aux bonnes dimensions. Pour corriger cela, on va voir ensemble comment changer le comportement de l'image de fond.

Modifiez le comportement d'une image de fond

Pour changer le comportement d'une image de fond, il existe plusieurs propriétés CSS :

  1. La propriété CSS background-attachment associée à la valeur  fixed  permet de rendre l'image de fond fixe lorsqu'on déroule la page web : background-attachment: fixed;

  2. La propriété CSS background-size associée à la valeur  cover  permet de redimensionner l'image afin qu'elle s'adapte à la taille de l'élément qui la contient (elle garde ses proportions, en rognant la largeur ou la hauteur en fonction de la taille de l'élément qui la contient) :  background-size: cover;

  3. La propriété CSS background-position associée aux valeurs  top ,  bottom ,  left ,  center  ou  right  permet d'indiquer où doit se trouver l'image de fond, par exemple :  background-position: top right;

Combinez ces propriétés CSS avec la "super-propriété"  background

Si vous utilisez beaucoup de propriétés en rapport avec le fond,  vous pouvez utiliser une sorte de “super-propriété” appelée  background  dont la valeur peut combiner plusieurs des propriétés :  

  • background-image  ;

  • background-repeat  ;

  • background-attachment  ;

  • background-size ;

  • et  background-position  .

C'est la première “super-propriété” que je vous montre, il y en aura d'autres.

On peut donc tout simplement écrire :

.banniere
{
background: url("paysage.jpg") cover center;
}

Créez des dégradés avec  linear-gradient

Pour créer un dégradé, on a besoin de la propriété CSS  background  :

background: linear-gradient(90deg, #8360c3, #2ebf91);

Si je devais lire en français cette ligne de CSS, voici ce que ça donnerait :

"J'applique un dégradé linéaire, à 90 degrés, en partant de la couleur  #8360c3  pour arriver à la couleur  #2ebf91.

Ce qui nous permet d'obtenir un très beau dégradé :

Le dégradé est linéaire et il va de la gauche vers la droite, à 90 degrés, passant du violet au vert.
Le dégradé va du violet au vert

Jouez sur la transparence avec la propriété CSS opacity

La propriété CSS opacity  permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence).

  • Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.

  • Avec une valeur de 0, l'élément sera totalement transparent.

Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6 , votre élément sera opaque à 60 %… et on verra donc à travers !

Jetez un œil à ce GIF auquel on applique 0.6 , puis 0.4 et enfin 0.2 :

L’opacité de l’image change en fonction des valeurs appliquées : opacity: 1; puis 0.8; puis 0.6; 0.4; et 0.2;
L’opacité de l’image change en fonction des valeurs choisies.

À vous de jouer !

Maintenant que vous maîtrisez les couleurs et l'héritage en CSS, vous allez pouvoir en tirer parti pour le projet de Robbie Lens ! Pour cela, vous devrez :

  • changer les couleurs de fond pour que :

    • la  div  dans laquelle on a les liens en haut des pages, et le pied de page, aient un fond blanc,

    • le cœur de la page ait un fond correspondant à  #1F2039 ;

  • … et les couleurs de texte pour que :

    • les liens en tête et pied de page soient de couleur  #242424 ,

    • les paragraphes, les listes et les titres H2 soient de la couleur  #F9F8FF  (sur fond bleu foncé).

Vous trouverez également des liens hypertextes qui ont été ajoutés : "Un projet ? Écrivez-moi" et "Voir mon portfolio". Vous devrez leur ajouter un dégradé qui passe de la couleur  #8E86B5  à la couleur  #ACAEED  et les mettre dans la police Montserrat, en blanc.

C'est normal si votre couleur de fond a une petite marge, nous corrigerons cela dans quelques chapitres.

En résumé

  • On change la couleur du texte avec la propriété  color  et la couleur de fond avec la propriété background-color.

  • On peut indiquer une couleur en écrivant son nom en anglais, black  par exemple, sous forme hexadécimale, comme  #FFC8D3, ou en notation RGB, comme  rgb(250,25,118).

  • On peut ajouter une image de fond avec la propriété  background-image. On peut choisir de fixer l'image de fond, ou encore de la positionner où on veut sur la page.

  • On peut rendre une portion de la page transparente avec la propriété  opacity  ou avec la notation  RGBA  (une extension de la notation RGB, où la quatrième valeur indique le niveau de transparence).

Bravo à vous ! Les couleurs et les fonds en CSS n'ont plus de secret pour vous ! Dans le chapitre suivant, vous allez découvrir deux notions très importantes : les bordures et les ombres. C'est parti !

Exemple de certificat de réussite
Exemple de certificat de réussite