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

  • arianecheng-40

    arianecheng-40

    J'ai bien fait et réussi. Mais il affiche que je dois avoir 3 balises <p> dans <body> !???

    le 20/08/2019 à 00h33

  • takfa

    takfa

    j'ai trouver lerreur merci

    le 17/10/2019 à 23h14

  • 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

20 Commentaires

  • severoyannick-19

    severoyannick-19

    Bonjour je ne comprends par d'où vient l'erreur `<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>`

    le 03/07/2020 à 17h14

  • meriam

    meriam Admin

    Bonjour, il faut insérer les propriétés à l'intérieur de l'attribut style

    le 06/07/2020 à 13h11

  • ibrahim84khaled-68

    ibrahim84khaled-68

    Bonsoir, chaque tentative, j'ai une seule et meme erreur qui apparait chaque fois : Pour la balise <p> n° 2 vous devez avoir la valeur font-size:8px (sans espaces) dans l'attribut style.

    le 09/06/2020 à 22h20

  • meriam

    meriam Admin

    Il faut mettre <p style="color:red ; font-size:8px">

    le 10/06/2020 à 01h21

  • meriam

    meriam Admin

    remplacez front-size par font-size

    le 10/06/2020 à 01h23

  • fredpery77-56

    fredpery77-56

    bonjour j'ai comme message d'erreur vous devez avoir la valeur en h2 front-size:8px (sans espace) dans l'attribut style alors que je n'ai pas d'espace !

    le 28/04/2020 à 10h33

  • meriam

    meriam Admin

    Bonjour, utilisez la propriété font-size au lieu de front-size.

    le 28/04/2020 à 12h12

  • bouchkhachakh.aniss-62

    bouchkhachakh.aniss-62

    Bonjour je suis totalement bloquer sur l'exercice. Possible d'avoir de l'aide svp ?

    le 17/02/2020 à 14h40

  • meriam

    meriam Admin

    Bonjour, pour le titre h2 l'attribut style est manquant.

    le 17/02/2020 à 14h51

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3WA learning - Les couleurs</title> </head> <body> <h2>Le progrès</h2> <p>Autrefois les écrans étaient monochromes</p> <p>Puis, un jour, la couleur fit son apparition</p> </body> </html>