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

  • pizzutoandrea3

    ca bloque

  • danderhy3

    HELP !!!

  • lm.monlouis

    Bonjour, je ne comprend pas mon erreur. j'ai mis les bon code dans les bonne balise et pourtant j'ai un message d'erreur

  • lm.monlouis

    apres verification j'ai localisé que entre "style"et "=" j'avais un espace, problème régler

53 Commentaires

  • pizzutoandrea3

    pizzutoandrea3

    ca bloque

    le 01/06/2017 à 14h43

  • danderhy3

    danderhy3

    HELP !!!

    le 16/04/2017 à 19h09

  • lm.monlouis

    lm.monlouis

    Bonjour, je ne comprend pas mon erreur. j'ai mis les bon code dans les bonne balise et pourtant j'ai un message d'erreur

    le 06/02/2017 à 16h58

  • lm.monlouis

    lm.monlouis

    apres verification j'ai localisé que entre "style"et "=" j'avais un espace, problème régler

    le 06/02/2017 à 17h00

  • mram

    mram Administrateur

    Pourquoi mettre "p" dans les balise lignes 6 et 8 ?

    le 21/05/2017 à 22h39

  • mram

    mram Administrateur

    Vous avez 2 fois "background-color: yellow" ...

    le 19/10/2016 à 10h54

  • markitobcn

    markitobcn

    ben non, j'en ai un blue et l'autre yellow

    le 19/10/2016 à 21h26

  • mram

    mram Administrateur

    En fait, tout contenu se trouvant dans une balise parente doit avoir une tabulation supplémentaire par rapport à cette dernière, c'est pour bien visualiser la hiérarchie de éléments.

    le 05/10/2016 à 21h37

  • phaelier

    phaelier

    Bonjour Je ne comprends pas la correction: Vérifiez vos balises ligne 8, essayez de n'en mettre qu'une par ligne (exemple : <ol style="background-color:yellow">)

    le 05/07/2016 à 21h08

  • mram

    mram Administrateur

    Il ne faut pas de style sur le titre <h3>

    le 20/10/2016 à 13h13

  • danderhy3

    danderhy3

    bonjour je suis certainement un peu têtu mais je ne comprends pas mon erreur malgré ma bonne volonté. pourriez vous m'aider svp

    le 28/04/2017 à 15h04

  • markitobcn

    markitobcn

    Et là?

    le 20/10/2016 à 14h48

  • mram

    mram Administrateur

    Votre balise <ol> a une indentation en trop.

    le 06/07/2016 à 18h46

  • mram

    mram Administrateur

    Oui, normalement c'est bon.

    le 21/10/2016 à 10h34

  • ctt

    ctt

    L'affichage dans la fenêtre "résultats" semble correct mais j'obtiens un message lorsque que soumets la réponse.

    le 04/11/2016 à 12h34

  • hicham-80

    hicham-80

    je comprend pas mon erreur il me dise une erreur en ligne que je devrais mettre qu une balise<!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 05/09/2016 à 15h07

  • mram

    mram Administrateur

    Essayez sans majuscule pour "yellow"

    le 04/11/2016 à 20h49

  • pizzutoandrea3

    pizzutoandrea3

    ca bloque..

    le 28/05/2017 à 18h39

  • laissyine.jawe

    laissyine.jawe

    Salut mes confrère,quelqu’un peux me dire pk ça ne fonctionne pas s'il vous plait,malgré le bon résultat sur mon écran? Merci d'avance!

    le 14/02/2016 à 05h40

  • mram

    mram Administrateur

    Si !

    le 07/06/2017 à 14h12

  • mram

    mram Administrateur

    Bonjour,

    Je viens de faire l'exercice, le résultat s'affiche bien (background blue et yellow au bon endroit) et je peux valider l'exercice (affichage de "Bonne réponse").

    Qu'est-ce qui ne "fonctionne pas" exactement ?

    Cordialement.

    le 17/02/2016 à 14h36

  • mram

    mram Administrateur

    Le code est bon, mais l'indentation pas vraiment. Il faut retirer une tabulation à la ligne 8 et 12. MAis en ajouter une aux lignes 9 à 11.

    le 04/05/2017 à 11h58

  • mram

    mram Administrateur

    Votre code ligne 8 à 12 a une indentation en trop...

    le 06/09/2016 à 17h15

  • pizzutoandrea3

    pizzutoandrea3

    pas comprix

    le 11/06/2017 à 22h09

  • pizzutoandrea3

    pizzutoandrea3

    petite aide..

    le 12/05/2017 à 00h47

  • PASCALKZ

    PASCALKZ

    Bonjour, je suis bloqué, fond bleu et fond jaune sur le paragraphe OL. je ne comprends pas comment passer à l'exercice suivant... Par avance, Merci.

    le 18/03/2017 à 12h12

  • danderhy3

    danderhy3

    je ne comprends pas mes erreurs. pouvez vous m'aider svp

    le 17/04/2017 à 15h39

  • thierry.guellaut

    thierry.guellaut

    Bonjour impossible de continuer ?? Une balise par ligne ? le résultat me semble bon pourtant ..

    le 17/11/2016 à 14h11

  • mram

    mram Administrateur

    Lignes 6 et 9, vous avez oublié de fermer les balises avec ">"

    le 17/11/2016 à 18h46

  • mram

    mram Administrateur

    Le code lignes 3 à 5 doit avoir une tabulation en plus.

    le 15/05/2017 à 13h48

  • mram

    mram Administrateur

    Votre code ne contient pas ce qui est demandé dans les instructions. Il faut donc suivre les instructions et ça devrait aller.

    le 21/03/2017 à 17h33

  • mram

    mram Administrateur

    @danderhy3 : un style doit être appliqué à la balise "body"

    le 18/04/2017 à 13h48

  • mram

    mram Administrateur

    @danderhy3 : là votre 2ème code est bon, mais il faut le rendre plus propre : alignement des balises, liges vides inutiles, etc.

    le 18/04/2017 à 13h50

  • laurence.alfonso

    laurence.alfonso

    Où peut on trouver les règles à respecter pour les tabulations s'il vous plait ??

    le 01/10/2016 à 16h58

  • mram

    mram Administrateur

    Il faudrait aligner le début des lignes 7 et 8.

    le 01/06/2017 à 16h01

  • markitobcn

    markitobcn

    bon est-ce moi qui le fait mal?

    le 18/10/2016 à 16h55

  • skioubia

    skioubia

    voici mon exercice et ça me marque toujours erreur <!DOCTYPE html> <html> <head> <title>Changer la couleur de l'arrière-plan</title> </head> <body p style="backgroud-color:Blue"> <h3>Les couleurs du drapeau français</h3> <ol p style="background-color:Yellow"> <li>Bleu</li> <li>Blanc</li> <li>Rouge</li> </ol> </body> </html>

    le 18/05/2017 à 11h32

  • pizzutoandrea3

    pizzutoandrea3

    non

    le 03/06/2017 à 00h09

  • pinaudk-56

    pinaudk-56

    Erreur(s) : Il semble que la taille de police de votre paragraphe soit 16px au lieu de 20px.

    le 02/05/2018 à 17h48

  • mram

    mram Administrateur

    La propriété "backgroud-color" n'existe pas, attention à la syntaxe. Par contre bizarre que ça génère une erreur sur la taille du texte ...

    le 04/05/2018 à 07h47

  • pinaudk-56

    pinaudk-56

    Verifiez que vous avez bien modifié la couleur d'arrière plan de votre liste à l'aide de la propriété style

    le 02/05/2018 à 17h49

  • mram

    mram Administrateur

    Et oui, comme j'ai dit, la propriété "backgroud- color" n'existe pas...

    le 04/05/2018 à 07h48

  • pinaudk-56

    pinaudk-56

    Verifiez que vous avez bien modifié la couleur d'arrière plan de votre liste à l'aide de la propriété style

    le 02/05/2018 à 17h49

  • mram

    mram Administrateur

    Bonjour, la propriété "backgroud-color" n'existe pas, attention aux fautes de frappe.

    le 09/05/2018 à 05h22

  • bmontebello

    bmontebello

    bonjour je ne comprend pas ou est mon erreur pourriez vous m'aider ? merci

    le 06/01/2018 à 09h27

  • mram

    mram Administrateur

    Bonjour, ce n'est pas "blackground-color" mais "background-color" ...

    le 12/01/2018 à 00h49

  • sisix1-56

    sisix1-56

    je ne comprend pas mon erreurs

    le 15/03/2018 à 19h43

  • mram

    mram Administrateur

    Bonjour, la propriété "backgroud-color" n'existe pas, attention aux fautes de frappe.

    le 16/03/2018 à 05h19

  • mael93-75

    mael93-75

    bonjour on me met ça alors que je l'ai fait :Erreur(s) : Verifiez que vous avez bien modifié la couleur d'arrière plan du body à l'aide de la propriété style.

    le 15/09/2018 à 16h54

  • mram

    mram Administrateur

    Bonjour, l'attribut "style" se met dans la balise ouvrante, pas la balise fermante.

    le 16/09/2018 à 08h45

  • Delta69mille-27

    Delta69mille-27

    Verifiez que vous avez bien modifié la couleur d'arrière plan de votre liste à l'aide de la propriété style ?????????????????????

    le 16/10/2018 à 19h43

  • meriam

    meriam Administrateur

    l'arrière-plan de la liste ordonnée "ol" doit être en jaune (yellow).

    le 17/10/2018 à 00h02

  • ou.broly-83

    ou.broly-83

    Verifiez que vous avez bien modifié la couleur d'arrière plan du body à l'aide de la propriété style. je ne vois pas ou est mon erreur

    le 01/07/2018 à 17h39

  • mram

    mram Administrateur

    Vous ne l'aviez pas mis à la balise en question. Normalement là c'est bon.

    le 05/07/2018 à 04h52

  • khalidb

    khalidb

    message affiche derreur Erreur(s) : Verifiez que vous avez bien modifié la couleur d'arrière plan du body à l'aide de la propriété style. Corriger

    le 09/10/2017 à 19h06

  • mram

    mram Administrateur

    Bonjour, le nom des couleurs ne prend pas de majuscule. Et il ne faut pas oublier de rajouter du contenu dans le titre (title).

    le 12/10/2017 à 16h10

  • khalidb

    khalidb

    cest bon jai trouve

    le 10/10/2017 à 18h08

  • gaillard.jf11100-57

    gaillard.jf11100-57

    Pour la balise <p> vous devez avoir la valeur background-color:yellow dans l'attribut style. Il n'y a pas de balise <p>

    le 24/01/2019 à 16h37

  • meriam

    meriam Administrateur

    background-color au lieu de background-color.

    le 24/01/2019 à 16h46