Exercice 12/16

  • Colorez le fond de la page en bleu. Pour cela, ajoutez l'attribut style à la balise ouvrante <body>, comme dans l'exemple et donnez la valeur blue à la propriété background-color.
  • En revanche, l'arrière-plan de la liste ordonnée <ol> doit être en jaune (yellow).

Leçon 12/16

CSS ne permet pas seulement de modifier l'apparence du texte : il peut aussi contrôler d'autres propriétés d'un élément, par exemple la couleur de l'arrière-plan ("background" en anglais).

Toujours avec l'attribut style. Mais dans ce cas, on écrira "background-color:yellow" pour que la couleur d'arrière-plan devienne jaune (yellow en anglais).

Pour illustrer, voici comment colorer l'arrière-plan d'un paragraphe <p> en jaune :

<p style="background-color: yellow;">Un coup de Stabilo SVP !</p>

Commentaires les mieux notés

129 Commentaires

  • ermakov.mo-47

    ermakov.mo-47

    Bonjour, pourqoi dans le exemple ici il y a le ; aples background-color: yellow

    le 06/03/2023 à 15h13

  • Patricio M

    Patricio M Admin

    ton code fonctionne très bien! le ; sert à séparer les proprietés CSS

    le 07/03/2023 à 08h06

  • goodsemani-65

    goodsemani-65

    bonjour je bloque

    le 24/05/2022 à 21h41

  • meriam

    meriam Admin

    Bonjour, il faut corriger la propriété background-color (pas blackground-color)

    le 25/05/2022 à 14h15

  • n.zannouti-72

    n.zannouti-72

    <!DOCTYPE html> <html> <head> <title>Changer la couleur de l'arrière-plan</title> </head> <body style="background-color:blue"> <h3>Les couleurs du drapeau français</h3> <ol style="background-color:yellow"> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body> </html>

    le 06/05/2022 à 08h41

  • sierraleone1-15

    sierraleone1-15

    alors qu'il n'y a pas de <p> que faire?

    le 25/10/2021 à 19h11

  • meriam

    meriam Admin

    il faut appliquer sur l'élément concerné

    le 26/10/2021 à 10h36

  • sierraleone1-15

    sierraleone1-15

    il est écrit que la balise<p> doit avoir background-color

    le 25/10/2021 à 19h10

  • meriam

    meriam Admin

    body et ol doivent avoir une couleur de background et pas p.

    le 26/10/2021 à 10h38

  • sierraleone1-15

    sierraleone1-15

    il est écrit que la balise<p> doit avoir background-color

    le 25/10/2021 à 19h09

  • meriam

    meriam Admin

    Pour cet exo, on souhaite appliquer une couleur de bacground sur body et ol (pas sur p )

    le 26/10/2021 à 10h37

  • sierraleone1-15

    sierraleone1-15

    bonjour,

    le 25/10/2021 à 19h07

  • caillarda-67

    caillarda-67

    je ne comprends pas ou est l'erreur... <!DOCTYPE html> <html> <head> <title>Changer la couleur de l'arrière-plan</title> </head> <body style="background-color:blue"> <h3>Les couleurs du drapeau français</h3> <ol style="background-color:Yellow"> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body> </html>

    le 06/10/2021 à 12h16

  • meriam

    meriam Admin

    Bonjour, merci d'écrire les lettres en miniscule.

    le 08/10/2021 à 15h56

  • w.kali-59

    w.kali-59

    jtrouve pas

    le 08/03/2021 à 13h58

  • meriam

    meriam Admin

    <ol p style="background-color: yellow;"> vous devez supprimer p qui se trouve à l'intérieur de la balise ol.

    le 09/03/2021 à 10h41

  • meriam

    meriam Admin

    Vous devez supprimer ce que vous avez ajouté comme style à l'intérieur de la balise li.

    le 09/03/2021 à 10h42

  • m.caillaud-65

    m.caillaud-65

    <!DOCTYPE html> <html> <head> <title>Changer la couleur de l'arrière-plan</title> </head> <body style="background-color: blue;"> <h3>Les couleurs du drapeau français</h3> <ol style="background-color: yellow;"> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body> </html>

    le 08/03/2021 à 13h57

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 09/03/2021 à 11h10

  • borisnesby-29

    borisnesby-29

    bonjour, je comprend pourquoi mon code fonctionne pas message Pour la balise <p> vous devez avoir la valeur background-color:yellow dans l'attribut style.<!DOCTYPE html> <html> <head> <title>Changer la couleur de l'arrière-plan</title> </head> <body style="background-color: blue"> <h3>Les couleurs du drapeau français</h3> <ol style="blackground-color: yellow"> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body> </html>

    le 25/02/2021 à 14h28

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 02/03/2021 à 12h59

  • ludoxm-34

    ludoxm-34

    maintenant j'ai ca !!Avez-vous bien placé la balise </h3> ?

    le 23/12/2020 à 13h08

  • meriam

    meriam Admin

    Votre code est correct.

    le 04/01/2021 à 08h23

  • ludoxm-34

    ludoxm-34

    je comprend plus !!!

    le 23/12/2020 à 12h54

  • meriam

    meriam Admin

    Ne touchez pas le code de départ: <body style="background-color:blue"> <h3>Les couleurs du drapeau français</h3> <ol style="background-color :yellow"> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body>

    le 23/12/2020 à 13h02

  • ludoxm-34

    ludoxm-34

    Avez-vous bien placé les balises <ol>, </ol> dans la balise <body> ?

    le 23/12/2020 à 12h54

  • meriam

    meriam Admin

    Vous avez oublié Le chevron fermant de la balise body.

    le 04/01/2021 à 08h15

  • ludoxm-34

    ludoxm-34

    bonjour je suis perdu

    le 23/12/2020 à 12h41

  • meriam

    meriam Admin

    Votre code est correct.

    le 24/12/2020 à 12h07

  • meriam

    meriam Admin

    N'hésitez pas à poser des questions si vous trouvez des problèmes dans les exercices qui suivent. Bon travail.

    le 24/12/2020 à 12h07

Pour publier un commentaire, vous devez vous connecter.
index.html
<!DOCTYPE html> <html> <head> <title>Changer la couleur de l'arrière-plan</title> </head> <body> <h3>Les couleurs du drapeau français</h3> <ol> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body> </html>
http://localhost:8080