Exercice 9/16

  • Mettez le titre en vert (green) avec une taille de 16 pixels (16px)
  • Mettez le premier paragraphe en violet (purple).
  • Mettez le second paragraphe en rouge (red) avec une taille de 8 pixels (8px)

Leçon 9/16

L'attribut style est un peu magique : il admet une grande variété de valeurs et peut s'associer à la plupart des balises HTML. Par exemple, essayons de changer la couleur d'un titre.

La propriété CSS qui nous intéresse cette fois n'est plus font-size mais color. Pour attribuer la couleur verte, il faudra lui donner la valeur "green" ("vert" en anglais), ce qui donnera color:green. Ajoutez dans la balise ouvrante l'attribut style suivi du signe = puis tapez color:blue entre guillemets. Par exemple :

<h2 style="color:orange">

Si on veut changer à la fois la couleur ET la taille du texte, il n'est pas nécessaire de rajouter un attribut style : il suffit de séparer les deux propriétés par un point-virgule . Par exemple :

<h2 style="color:blue;font-size:14px">

Faites votre choix dans la liste des couleurs disponibles en HTML.

_

Tout le contenu de l'attribut style (sa valeur) doit se trouver entre guillemets (à la droite du signe =).

Entre chaque élément de style (couleur, taille) placez un point-virgule.

Si vous avez une valeur anormale pour la taille de police, essayez de remettre le zoom de votre navigateur par défaut en tapant Ctrl + 0 ou Cmd + 0.

_

Commentaires les mieux notés

  • bailly.antoine.n-63

    bonjour, j'ai un soucis, l'enoncé me dis " Mettez le titre en vert (green) avec une taille de 16 pixels (16px) Mettez le premier paragraphe en violet (purple). Mettez le second paragraphe en rouge (red) avec une taille de 8 pixels (8px)"

  • bailly.antoine.n-63

    or lors de l'exercice la correction me demande ceci" <body> <h2 style="color:green;font-size:16px">Le progrès</h2> <p style="color:green">Autrefois les écrans étaient monochromes</p> <p style="color:purple;font-size:8px">Puis, un jour, la couleur fit son apparition</p> </body>"

  • dams

    bonjour, je suis bloqué, je ne trouves pas mon erreur

  • mram Administrateur

    Ligne 5, la balise "title" ne doit pas posséder de style, elle n'est pas faite pour.

76 Commentaires

  • dams

    dams

    bonjour, je suis bloqué, je ne trouves pas mon erreur

    le 22/10/2016 à 15h00

  • mram

    mram Administrateur

    Ligne 5, la balise "title" ne doit pas posséder de style, elle n'est pas faite pour.

    le 24/10/2016 à 13h31

  • licorne66

    licorne66

    bonjour à tous: On me dit de mettre une seule balise <h2> se que j'ai fais pour chacune des lignes, je ne comprends pas mon erreur ? merci de votre aide.

    le 09/05/2017 à 19h35

  • mram

    mram Administrateur

    LIgnes 9 et 10 il ne faut qu'une paire de guillemets pour contenir tout le code CSS.

    le 09/03/2017 à 01h12

  • mram

    mram Administrateur

    Bonjour, non dans votre code vous avez 3 balise "h2". Il n'en faut qu'une et une balise s'écrit toujours ainsi : <h2>blablbala</h2>

    le 15/05/2017 à 13h25

  • florian.giannico2501

    florian.giannico2501

    Bonjour, je ne comprend pas mon erreur alors que j'ai bien suivie les instructions

    le 08/03/2017 à 19h58

  • walidmih

    walidmih

    Instructions Mettez le titre en vert (green) avec une taille de 16 pixels (16px) --> sa veux dire h2 parceque on peut pas faire le style a la balise <title>

    le 23/03/2017 à 00h00

  • mram

    mram Administrateur

    Tout à fait, il s'agit des balises de type h1, h2, h3, etc.

    le 24/03/2017 à 10h40

  • jenebakone

    jenebakone

    Bonjour,effectivement il serait bien de modifier l 'énoncé car il nous est demandé de mettre un style à "title" alors qu'il s'agit de "h2". Cependant le message d'erreur nous permets de corriger ce malentendu et de valider l'exercice.

    le 05/10/2016 à 16h34

  • Magalislk

    Magalislk

    Trop de bugs je retourne sur code academy...

    le 22/06/2016 à 15h26

  • mram

    mram Administrateur

    Ce ne sont pas des bugs, il y a une erreur dans votre code dans cet exercice : il faut des points-virgule pour séparer les propriétés css...

    le 22/06/2016 à 16h12

  • mram

    mram Administrateur

    Regardez comment c'est écrit dans l'énoncé pour vous aider.

    le 22/06/2016 à 16h13

  • mram

    mram Administrateur

    Attention, ne pas confondre <h1> qui est un titre quand-même, mais qui n'a rien à voir avec la balise "title". Dans l'énoncé on précise le titre, sous-entendu le "h1".

    le 05/10/2016 à 21h15

  • lucas_68_-98

    lucas_68_-98

    bonjour, je ne comprends pas: Votre première balise <p> a une color vide ! Exemple : <p style="color:red">contenu</p>. (et j'ai bien mis en anglais)

    le 02/09/2018 à 20h40

  • mram

    mram Administrateur

    Bonjour, attention vous ouvrez deux fois les balises "p".

    le 10/09/2018 à 03h30

  • mehdialami229

    mehdialami229

    Ou est mon erreur?

    le 20/08/2017 à 17h58

  • mram

    mram Administrateur

    Bonjour, c'était pas le bon niveau de titre.

    le 22/08/2017 à 13h35

  • ingushsamad

    ingushsamad

    aidez moi svp je comprend pas je doit mettre un deuxieme <p>

    le 01/01/2018 à 06h43

  • mram

    mram Administrateur

    Bonjour, oui il faut mettre un deuxième "p" en dessous de l'autre et non à l'intérieur. Il ne faut pas deux "p" imbriqués l'un dans l'autre.

    le 06/01/2018 à 19h07

  • servicecommunication.semaphore-42

    servicecommunication.semaphore-42

    pourquoi ça marche pas

    le 21/09/2018 à 14h18

  • meriam

    meriam Administrateur

    la balise title ne doit pas contenir l'attribut style

    le 01/10/2018 à 17h53

  • paulmiget0803-41

    paulmiget0803-41

    Bonjour, je ne vois pas où je me suis tromper :<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3WA learning - Les couleurs</title> </head> <body> <h2 style="font-size: 16px;color:green">Le progrès</h2> <p style="font-size: 12px;color:purple">Autrefois les écrans étaient monochromes</p> <p style="font size: 10px;color:red">Puis, un jour, la couleur fit son apparition</p> </body> </html>

    le 05/08/2018 à 13h38

  • mram

    mram Administrateur

    Bonjour, que vous dit le message exactement ?

    le 13/08/2018 à 03h21

  • triplaxs

    triplaxs

    Et il vrais que l'on devrai faire cela dans un fichier css séparer que l'on vas nomé srtyle css que l'on lira a notre fichier HTLM ?

    le 20/07/2017 à 18h35

  • mram

    mram Administrateur

    Oui, vous le verrez dans les exercices qui suivent.

    le 23/07/2017 à 16h30

  • severine.74

    severine.74

    merci!

    le 01/02/2018 à 22h29

  • veronique.nollet

    veronique.nollet

    Bonjour, mon titre n'apparaît pas en vert et la taille ne se modifie pas alors que pour les paragraphes, c'est ok. Je ne comprends pas.

    le 13/03/2018 à 14h00

  • mram

    mram Administrateur

    Bonjour, il faut mettre le CSS à la balise "h1" et non "title" qui sert juste à afficher le titre de la page dans l'onglet navigateur et les résultats de recherche.

    le 16/03/2018 à 04h55

  • wardainf-20

    wardainf-20

    Bonsoir, la syntaxe est correcte mais tj il affiche erreur

    le 11/08/2018 à 21h58

  • mram

    mram Administrateur

    Quel est votre message d'erreur svp ? Ca sera plus facile pour vous aider.

    le 17/08/2018 à 05h51

  • sisix1-56

    sisix1-56

    j'ai un problème mon titre j'ai pas tros compris

    le 15/03/2018 à 18h51

  • mram

    mram Administrateur

    Bonjour, on ne met jamais de CSS à la balise "title", et vous avez oublié de fermer la balise "title".

    le 16/03/2018 à 05h18

  • michelperard83

    michelperard83

    Bonjour, je ne vois pas du tout mon erreur dans ce code : <body> <h2><p style="color:green;font-size:16px">Le progrès</h2> <p><p style="color:purple">Autrefois les écrans étaient monochromes</p> <p><p style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p> </body>

    le 14/09/2017 à 19h53

  • mram

    mram Administrateur

    Bonjour, il ne faut pas mettre deux fois <p> c'est inutile. Et le titre <h2> n'est pas fermé.

    le 20/09/2017 à 14h38

  • julien-demaria

    julien-demaria

    Bonjour je ne comprends pas mon erreur

    le 27/07/2017 à 15h52

  • mram

    mram Administrateur

    Bonjour, il manquait la propriété "font-size" dans votre code.

    le 01/08/2017 à 12h10

  • sarrabj20-78

    sarrabj20-78

    Bonjour. Je ne comprends pas mon erreur

    le 27/07/2018 à 01h05

  • mram

    mram Administrateur

    Bonjour, la balise "title" ne doit contenir que du texte.

    le 02/08/2018 à 05h06

  • deuxs-95

    deuxs-95

    Bonjour, pourriez-vous vérifier le code svp : j'ai pourtant bien indiqué front-siez dans h2 puisque cela s'affiche ! Merci

    le 27/08/2018 à 12h37

  • mram

    mram Administrateur

    Bonjour, non vous avez mis "front-size" et non "font-size"...

    le 05/09/2018 à 06h17

  • robotoreo3-77

    robotoreo3-77

    bonsoir, il me dit qu'il faut deux balises <p>, je ne comprend pas

    le 13/06/2018 à 22h01

  • mram

    mram Administrateur

    Bonjour,

    Lignes 9 et 10, vous ouvrez 2 fois la balise "p". Pourquoi ?

    le 19/06/2018 à 04h39

  • audebertt-85

    audebertt-85

    Bonjour, est-ce correcte? on me dit qu'une seule balise h2 est nécessaire <h2> <h2 style="color:green;font-size:16px">Le progrès</h2> <p> <h2 style="color:purple">Autrefois les écrans étaient monochromes</p> <p> <h2 style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p>

    le 26/03/2018 à 14h27

  • mram

    mram Administrateur

    Bonjour, non ce n'est pas correct, vous aviez plusieurs balises h2 dans votre code, d'où l'erreur. Relisez bien votre code avant.

    le 28/03/2018 à 06h19

  • ndiaye.ahmad.mansour-35

    ndiaye.ahmad.mansour-35

    Bonsoir j'arrive pas a voir mon erreur pouvez-vous vérifier le code svpl quand je met soumettre il me dit que je doit avoir 3 balise <p>dans le body

    le 26/04/2019 à 00h23

  • meriam

    meriam Administrateur

    Bonjour, je vois dans votre code, des balises ouvrantes p supplémentaires .

    le 26/04/2019 à 11h54

  • mael93-75

    mael93-75

    quand je met front-size on me dit que c faux et quand je met font-size on me dit que c juste

    le 15/09/2018 à 16h12

  • mram

    mram Administrateur

    Bah oui, la propriété c'est "font-size" et pas "front-size" ...

    le 16/09/2018 à 08h40

  • nathyde

    nathyde

    Bonjour, voici ce que l'on me dit "Votre deuxième balise <p> a une font-size vide ! Exemple : <p style="font-size:12px">contenu</p>". Pourtant, ma font size n'est pas vide...

    le 07/01/2018 à 14h43

  • mram

    mram Administrateur

    Bonjour, il ne faut pas utiliser " = " mais " : " entre le nom de la propriété et la valeur.

    le 12/01/2018 à 01h16

  • edouarddecourcelle-62

    edouarddecourcelle-62

    votre site ne marche pas je code en html sur sublimetext sa marche sans problème ici sa ne fais que de me dire qu'il y a une erreur...

    le 13/08/2018 à 12h06

  • mram

    mram Administrateur

    L'exercice fonctionne très bien. Votre code contient des erreurs.

    Un titre et un paragraphe sont deux éléments distincts, pourquoi mettre les deux paragraphes dans un titre "h2" ?

    Le seul titre qu'il faut est celui ligne 8.

    le 17/08/2018 à 06h05

  • tounsydu0069

    tounsydu0069

    bonjour je ne comprend pas mon erreur..

    le 05/07/2017 à 15h24

  • mram

    mram Administrateur

    Bonjour, j'ai testé votre code et j'ai pu valider l'exercice ...

    le 07/07/2017 à 11h55

  • ambre.naude

    ambre.naude

    Bonjour, je ne comprends pas mon erreur, "Votre première balise <p> a une color vide ! Exemple : <p style="color:red">contenu</p>" alors que le texte est bien en couleur en dessous... Merci pour votre aide

    le 08/01/2018 à 13h21

  • mram

    mram Administrateur

    Bonjour, il faut mettre le nom des couleurs en anglais et non en français.

    le 12/01/2018 à 01h39

  • vadim.olivan-96

    vadim.olivan-96

    <h2 style="color:orange;fontsize:16px">Le progrès</h2> et on me dit qu'il manque la propriété fontsize

    le 22/02/2018 à 13h34

  • vadim.olivan-96

    vadim.olivan-96

    c'est bon, j'ai oublié le -

    le 22/02/2018 à 13h35

  • augauci

    augauci

    bonjour je ne comprend pas mon erreure

    le 19/12/2017 à 17h22

  • mram

    mram Administrateur

    Bonjour, 16xp, 8xp ce n'est pas la bonne unité. Il faut utiliser px ( pixels ) . Et dans vos paragraphes "p" il ne doit pas y avoir de titres "h2" .

    le 23/12/2017 à 16h25

  • ronangarnier

    ronangarnier

    Bonjour je ne vois pas mon erreur "Il manque la propriété font-size dans l'attribut style de votre balise <h2> !"

    le 08/09/2017 à 15h10

  • mram

    mram Administrateur

    Bonjour, attention aux guillemets. Il n'y a qu'un seul couple de guillemets : style="..." et toutes les propriétés doivent être dedans.

    le 12/09/2017 à 16h18

  • severine.74

    severine.74

    Bonjour. Je ne comprends pas mon erreur, on me dit qu'une seule balise h2 est nécessaire, mais si je n'en mets qu'une sur la ligne 8, je ne peux plus mettre les autres lignes en couleur

    le 27/01/2018 à 09h11

  • mram

    mram Administrateur

    Bonjour, dans l'énoncé on parle de paragraphes également, il n'y a bien qu'une seule balise "h2" à mettre. Les autres sont des "p".

    le 30/01/2018 à 18h36

  • diallolamine55

    diallolamine55

    bonjour ,on me dit de mettre une seul balise h2...et je crois ne pas faire d'erreur

    le 10/07/2017 à 17h58

  • mram

    mram Administrateur

    Bonjour, juste après "body" vous ouvrez deux fois la balise "h2" ...

    le 10/07/2017 à 18h05

  • steve.besson

    steve.besson

    je ne vois pas ou est l'erreur non plus

    le 09/11/2017 à 18h06

  • mram

    mram Administrateur

    Bonjour, il ne doit y avoir qu'un seul couple de guillemets : style="..."

    le 11/11/2017 à 14h51

  • bobbysix-52

    bobbysix-52

    Deux balises <p> sont nécessaires !

    le 02/10/2018 à 13h11

  • meriam

    meriam Administrateur

    la ligne 6 est inutile, si non le reste est correcte

    le 04/10/2018 à 17h57

  • francelinloic

    francelinloic

    Bonjour je n'arrive pas a trouer mon erreurs, ils me disent que 2 balise <p> sont néccesaires

    le 11/09/2017 à 16h47

  • mram

    mram Administrateur

    Bonjour, pourquoi mettre deux fois <p><p></p></p> ?? Un seul couple de balise ouvrante / fermante suffit.

    le 12/09/2017 à 17h28

  • killian.pas-52

    killian.pas-52

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3WA learning - Les couleurs</title> </head> <body> <h2 style="color:green;font-size:16px">Le progrès</h2> <p style="color:purple">Autrefois les écrans étaient monochromes</p> <p style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p> </body> </html>

    le 16/05/2019 à 19h02

  • hakima.danse-79

    hakima.danse-79

    cela marche avec le code suivant <h2 style="color:green; font-size:16px">Le progrès</h2> <p style="color:purple">Autrefois les écrans étaient monochromes</p> <p style="color:red;font-size:8px">Puis, un jour, la couleur fit son apparition</p>

    le 20/05/2019 à 15h00

  • eh1307-61

    eh1307-61

    Désolé , j'ai trouvé mon erreur j'ai mis 14px au lieu de 10px comme annoncé dans l'exercice

    le 03/04/2019 à 22h33