Exercice 10/16

Modifiez la taille de police des trois éléments de la liste comme ceci :

  1. Mettez le premier élément en Arial avec une taille de 16 pixels
  2. Mettez le deuxième élément en Verdana avec une taille de 12 pixels
  3. Mettez le troisième élément en Impact avec une taille de 10 pixels

Veillez à bien écrire Arial, Verdana et Impact exactement comme dans l'exemple, il n'y aura aucune tolérance de la part de la police !

Leçon 10/16

Si le CSS se limitait à changer la couleur et la taille, on aurait terminé notre cours mais heureusement vous n'imaginez pas ce qu'il vous reste à apprendre ! On peut aussi changer le type de police ou font-family ("famille de police" en anglais). On l'utilise ainsi :

<h1 style="font-family: Arial">Un titre en police Arial</h1>
  1. On commence par écrire <h1>Notre titre</h1>.
  2. Puis, dans la balise ouvrante <h1>, on ajoute l'attribut style suivi de = et on tape "font-family: Arial".

Pour changer, utilisons cet attribut avec d'autres balises, <li> par exemple :

<li style="font-family: Arial">Bonjour !</li>

Comme pour les couleurs, faites votre choix dans la liste des polices disponibles.

_

Encore une fois, si le message d'erreur vous indique une valeur étrange pour la taille de police, essayez de remettre le zoom de votre navigateur par défaut en tapant Ctrl + 0 ou Cmd + 0.


N'oubliez surtout pas d'encadrer la valeur de l'attribut style avec des guillemets, comme cela :

style="font-family: Arial"

Et de séparer les deux éléments du style avec un point-virgule, comme cela :

style="font-size: 16px; font-family: Arial"

_

Commentaires les mieux notés

  • mohamed.soifoini

    bonjour !j'ai besoin d'aide je ne comprend pas pourquoi il me refuse mon code sur le 3éme élément , j'ai mis 10px et il me dise que j'ai mis 16px

  • clad91130-95

    bonsoir mon message d'erreur avez vous mi le 1er li en Arial ce que j'ai deja fait on parle bien des 3 lignes a modifier et non le h1?

  • patrice.francois2

    Même problème pour moi!?

  • patrice.francois2

    Attention "font-size" avec : et non =; c'était mon erreur!!!

65 Commentaires

  • mohamed.soifoini

    mohamed.soifoini

    bonjour !j'ai besoin d'aide je ne comprend pas pourquoi il me refuse mon code sur le 3éme élément , j'ai mis 10px et il me dise que j'ai mis 16px

    le 20/07/2017 à 17h39

  • mram

    mram Administrateur

    Bonjour, vous n'avez pas écrit "font-size" mais "font-seize" ...

    le 23/07/2017 à 16h27

  • clad91130-95

    clad91130-95

    bonsoir mon message d'erreur avez vous mi le 1er li en Arial ce que j'ai deja fait on parle bien des 3 lignes a modifier et non le h1?

    le 09/06/2018 à 20h52

  • mram

    mram Administrateur

    Bonjour, le souci est que vous mettez deux fois </li> . La première fois il ne faut mettre que > pour fermer la balise ouvrante qui contient les styles.

    le 13/06/2018 à 04h26

  • patrice.francois2

    patrice.francois2

    Même problème pour moi!?

    le 24/12/2015 à 17h43

  • patrice.francois2

    patrice.francois2

    Attention "font-size" avec : et non =; c'était mon erreur!!!

    le 24/12/2015 à 17h51

  • tlemsani_r

    tlemsani_r

    Bonjour, j'ai un petit problème avec la 3ème balise. Un message d'erreur s'affiche m'indiquant mon texte est en 16px au lieu de 10px. Or, j'ai bien taper 10px. Pouvez-vous me dire quelle est mon erreur ?

    le 10/10/2016 à 08h58

  • cecmigno

    cecmigno

    Je ne peux malgré l'astuce continuer les exercices car la police Verdana est bien dans le code en 12px et le message d'erreur me dit qu'il est en 16px. Cela me fait la même remarque sur deux ordinateurs différents

    le 16/12/2015 à 20h44

  • phaelier

    phaelier

    Bonjour Je ne comprends pas la correction : "Vérifiez vos balises ligne 10, essayez de n'en mettre qu'une par ligne (exemple : <li style="font-family:Verdana; font-size:12px">Ce texte en moyen est en Verdana.</li>)"

    le 05/07/2016 à 21h07

  • mram

    mram Administrateur

    C'est parce qu'il y a un espace en trop avant <li> à la ligne 11.

    le 24/06/2016 à 18h53

  • mram

    mram Administrateur

    Il ne faut pas d'espace avant le signe = à la ligne 10.

    le 06/07/2016 à 18h45

  • mram

    mram Administrateur

    Attention à la syntaxe, ligne 11 vous n'avez pas écrit "font-size" ...

    le 10/10/2016 à 13h26

  • umwamikazigilberte

    umwamikazigilberte

    je ne comprends pas,il n'arrete pas de m'afficher verifier vos balises ligne 10,Essayez de n'en mettre qu'une par ligne .Voici mon code <!DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li style="font-family: Arial;font-size: 16px"> Voici un texte de grande taille en Arial</li> <li style="font-family: Verdana;font-size: 12px"> Ceci est un texte moyen en Verdana.</li> <li style="font-family: Impact;font-size: 10px"> Et ce texte est petit mais il est en Impact.</li> </ol> </body> </html>de

    le 12/02/2017 à 21h39

  • ifrah.hicham

    ifrah.hicham

    bonjour, <!DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> J'obtiens une erreur et on me demande d'essayer d'ouvrir qu'une balise sur la ligne 4 ou il y a title, je ne vois vraiment pas l'erreur.

    le 23/12/2016 à 19h09

  • maycon_neto11

    maycon_neto11

    Voici la réponse correct de l'énoncé : <li style="font-family: Arial;font-size:16px">Voici un texte de grande taille en Arial.</li> <li style="font-family: Verdana;font-size:12px">Ceci est un texte moyen en Verdana.</li> <li style="font-family: Impact;font-size:10px">Et ce texte est petit mais il est en Impact.</li>

    le 13/02/2017 à 12h40

  • fumey.claire

    fumey.claire

    Bonjour, je cherche à comprendre le problème il m'affiche : "Vérifiez vos balises ligne 8, essayez de n'en mettre qu'une par ligne (exemple : <ol>)"Auriez vous une idée ? Merci !

    le 07/11/2016 à 11h18

  • mram

    mram Administrateur

    Bonjour, il faut revoir l'indentation de votre code. Chaque balise qui se trouve à l'intérieur d'une balise parente doit avoir une indentation en plus (et une indentation = une tabulation).

    le 26/12/2016 à 11h06

  • mram

    mram Administrateur

    Bonjour, il ne doit y avoir qu'une seule paire de guillemets qui englobe toutes les propriétés, comme ceci : <style="votre code css">

    le 08/11/2016 à 15h02

  • mram

    mram Administrateur

    @umwamikazigilberte : ce doit être un souci d'indentation dans votre code à partir de cette ligne.

    le 14/02/2017 à 01h35

  • laibyasid

    laibyasid

    Il y a un bug sur cet exercice là.... Mon code est bon, et j"ai malgré ça tjrs le même message d'erreur! Voilà mon code: <ol> <li style= "font-family:Arial; font-size:16px">Voici un texte de grande taille en Arial.</li> <li style="font-family:Verdana; font-size:12px">Ceci est un texte moyen en Verdana.</li> <li style="font-family:Impact; font-size:10px">Et ce texte est petit mais il est en Impact.</li> </ol> Et le correcteur me dit que ceci: VÉRIFIEZ VOS BALISES LIGNE 7, ESSAYEZ DE N'EN METTRE QU'UNE PAR LIGNE (EXEMPLE : <H1 STYLE="FONT-FAMILY:ARIAL">DÉMONSTRATION DE LA FORCE DES POLICES </H1>)

    le 09/04/2017 à 14h30

  • mram

    mram Administrateur

    Lignes 10 et 11 dans le texte il y a des espaces en trop ...

    le 11/04/2017 à 16h11

  • annelaure.schwertz

    annelaure.schwertz

    Je ne comprends pas, il me semble avoir respecté la consigne et l'outil me demande de respecter la balise ligne 9 "vérifiez os balises ligne 9, essayez de n'en mettre qu'une par ligne. Pouvez-vous me dire ce qui ne va pas s'il vous plaît.

    le 26/09/2016 à 01h50

  • mram

    mram Administrateur

    C'est juste un problème d'indentation. Vérifiez que chaque balise "enfant" possède une indentation de plus que sa balise parente.

    le 28/09/2016 à 20h56

  • Valentin

    Valentin

    Bonjour, Voici mon code : <!DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li style="font-family:Arial;font-size:16px">Voici un texte de grande taille en Arial. <li style="font-family:Verdana;font-size:12px"> Ceci est un texte moyen en Verdana. <li style="font-family:impact;font-size:10px"> Et ce texte est petit mais il est en Impact. </li> </ol> </body> </html> "Vérifiez vos balises ligne 10, essayez de n'en mettre qu'une par ligne" Même en lisant les commentaires je ne trouve pas le problème. Pouvez-vous m'aider svp ? Merci

    le 22/11/2016 à 17h01

  • mram

    mram Administrateur

    Votre code lignes 9 à 13 ne va pas. Vous avez 3 balises <li> ouvrante, il faut donc 3 balises </li> fermante or il n'y en a qu'une ligne 14. L'idéal est de mettre chaque couple de balise <li>blabla</li> sur une seule ligne.

    le 24/11/2016 à 13h04

  • clauchauv

    clauchauv

    le message d'erreur dit qu'il faut mettre une seule balise en ligne 11 c'est ce que j'ai fait et ça ne marche pas : impossible de continuer

    le 24/06/2016 à 12h13

  • aurelie.corbet

    aurelie.corbet

    pardon erreur de ma part sur l'orthographe de "style"

    le 17/07/2017 à 16h10

  • moorh-41

    moorh-41

    voici ma réponse mais le message me dit si j ai changé le 1er <li> !DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li style= font-family:Arial;font-size:16px">" Voici un texte de grande taille en Arial." </li> <li style= font-family: Verdana;"font-size:12px"> " Ceci est un texte moyen en Verdana." </li> <li style=font-family:Impact.=font-size :10px"> " Et ce texte est petit mais il est en Impact." </li> </ol> </body> </html>

    le 17/04/2018 à 14h31

  • mram

    mram Administrateur

    Bonjour, il manque des guillemets autour des propriétés CSS.

    le 18/04/2018 à 05h06

  • alexismoquet

    alexismoquet

    bjr, ca me dit que je suis en 16px au lieu de 12px à la 2eme ligne, mais je suis bien en 12px

    le 31/08/2017 à 13h45

  • mram

    mram Administrateur

    Bonjour, ce que vous avez fait ne fonctionne pas. Il ne faut mettre qu'un seul couple de guillemets : style="...."

    le 06/09/2017 à 10h05

  • nkeshimanabrice-37

    nkeshimanabrice-37

    <!DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li style="font-family: Arial";font-size:16px>!Voici un texte de grande taille en Arial.</li> <li style="font-family: Verdana";font-size:12px>Ceci est un texte moyen en Verdana.</li> <li style="font-family: Impact";font-size:10px>Et ce texte est petit mais il est en Impact.</li> </ol> </body> </html> je vois pas l'erreur exactement

    le 04/09/2018 à 09h14

  • mram

    mram Administrateur

    Les guillemets de l'attribut style ne sont pas fermés au bon endroit lignes 8, 9, 10.

    le 10/09/2018 à 03h46

  • CodyLeCodingue

    CodyLeCodingue

    BUG BUG BUG <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li style="font-family:Arial;size:16px">Voici un texte de grande taille en Arial.</li> <li style="font-family:Verdana;size:12px">Ceci est un texte moyen en Verdana.</li> <li style="font-family:Impact;size:10px"> Ce texte est petit mais est en Impact.</li> </ol> </body> </html>

    le 02/09/2017 à 20h04

  • mram

    mram Administrateur

    Bonjour, c'est pas "size" le nom de la propriété, mais "font-size" ...

    le 06/09/2017 à 10h49

  • fayzabas

    fayzabas

    <!DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li style= font-family:Arial; font-size:16px>Voici un texte de grande taille en Arial.</li> <li style= font-family:verdana; font-size:12px>Ceci est un texte moyen en Verdana.</li> <li style=font-family:Impact font-size:10px>Et ce texte est petit mais il est en Impact.</li> </ol> </body> </html> quelle est l'erreur dans ce code

    le 03/01/2018 à 23h32

  • mram

    mram Administrateur

    Bonjour, il manque la majuscule à Verdana.

    le 07/01/2018 à 01h38

  • thomas.chalanson

    thomas.chalanson

    " Erreur(s) : Il semble que la taille de la police de votre deuxieme balise <li> est 16px au lieu de 12px." Bonjour, voici ce que j' ai quand je soumet alors que dans l' ennocé de l' exercice vous demandez dans la 2° balise 12 px et non 16 px

    le 13/10/2017 à 17h07

  • mram

    mram Administrateur

    Bonjour, vous oubliez d'utiliser la propriété font-size.

    le 18/10/2017 à 23h42

  • omartest750

    omartest750

    Je voit pas vraiment l'erreur en faite .

    le 30/09/2017 à 17h12

  • mram

    mram Administrateur

    Bonjour, il manquait une lettre dans une propriété CSS. Pas forcément évident à voir en effet.

    le 03/10/2017 à 21h53

  • omartest750

    omartest750

    Le code est bon portant il me dit que mon deuxieme point li et de taille 16 alors que moi je voit clairement 12

    le 30/09/2017 à 17h12

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Il semble que la taille de la police de votre deuxieme balise <li> est 16px au lieu de 12px. c'est le message d'erreur...

    le 24/09/2018 à 15h14

  • meriam

    meriam Administrateur

    il faut pas écrire de cette manière style="font-family: Arial";font-size:16px. Les guillements doivent s'écrire aprés la propriété font-size. style="font-family: Arial;font-size:16px".

    le 05/10/2018 à 16h49

  • agbomakouj

    agbomakouj

    l'ennoncé dit 12px et là la machine reclame 16px et meme en mettant 16px il refuse , on fait comment

    le 07/04/2018 à 19h23

  • mram

    mram Administrateur

    Bonjour, c'est 16px qu'il faut mettre et non 16 px

    le 11/04/2018 à 05h39

  • mohamed.soifoini

    mohamed.soifoini

    bonjour ! je ne comprend pas il refuse toujours mon code

    le 27/07/2017 à 16h35

  • mram

    mram Administrateur

    Bonjour, vous aviez mis "font-seize" à la place de "font-size" à la dernière ligne.

    le 01/08/2017 à 12h13

  • deuxs-95

    deuxs-95

    Bonjour j'ai maintenant plusieurs bugs alors que les codes sont OK puisqu'ils s'affichent correctement... Pourriez-vous vérifier que le 2e <li> est bien en 12px et pas en 16px comme l'indique le message ? Merci.

    le 27/08/2018 à 12h45

  • mram

    mram Administrateur

    Bonjour, même erreur que précédemment, vous avez écrit "front-size", attention aux fautes de frappe.

    le 05/09/2018 à 06h22

  • mael93-75

    mael93-75

    boonjour on me dit que ma troisieme balise est 16px alors que j'ai bien mis 10xp

    le 15/09/2018 à 16h30

  • mram

    mram Administrateur

    Bonjour, quel est le messqge d'erreur exactement ?

    le 16/09/2018 à 08h42

  • julio.espadas-1

    julio.espadas-1

    J'ai mis au deuxième élément <li> le font size correct : 12px mais il ya un bug qui me dit que j'ai mis 16px...

    le 21/05/2018 à 14h21

  • mram

    mram Administrateur

    Bonjour, il ne faut mettre "style" qu'une seule fois.

    le 23/05/2018 à 07h22

  • julio.espadas-1

    julio.espadas-1

    No mais franchement il ya un bug, c'est pas possible, j'ai mis le font-size comme il faut mais c'est faux...

    le 21/05/2018 à 14h28

  • mram

    mram Administrateur

    Non pas de bug, regardez bien votre code, vous avez mis l'attribut "stytle" 2 fois. Ce n'est pas correct, une fois suffit.

    le 23/05/2018 à 07h23

  • vaco.real3-59

    vaco.real3-59

    bonjour qu es qui ne fonctionne pas?

    le 24/04/2018 à 17h35

  • mram

    mram Administrateur

    Bonjour, erreur dans le nom de la police, vous avez mis Veranda.

    le 29/04/2018 à 02h54

  • mohamed.soifoini

    mohamed.soifoini

    j'ai corrigé j'ai mis font-size mais ça ne marche tjrs pas

    le 02/08/2017 à 20h44

  • mram

    mram Administrateur

    Bonjour, bizarre votre code semble correct maintenant...

    le 05/08/2017 à 10h25

  • edouarddecourcelle-62

    edouarddecourcelle-62

    ptn mais c'est pas possible votre site ne marche pas

    le 13/08/2018 à 12h20

  • mram

    mram Administrateur

    Soyez poli.

    Votre code contient des erreurs. Pourquoi mettre des "h2" partout ?

    Ca n'a pas de sens sémantique.

    le 17/08/2018 à 06h07

  • khalidb

    khalidb

    Erreur(s) : Avez-vous change le deuxieme <li> en police Verdana

    le 08/10/2017 à 22h16

  • mram

    mram Administrateur

    Bonjour, attention aux petites erreurs de frappe, c'est bien "family" et non "familly" en anglais :)

    le 09/10/2017 à 01h02

  • mohamed.soifoini

    mohamed.soifoini

    dés que je soumet ça ne marche pas et je ne trouve aucun erreur

    le 07/08/2017 à 16h13

  • mram

    mram Administrateur

    Bonjour, eh oui à la dernière ligne vous avez écrit "font-famly" il manque un "i" . C'est juste ça, le reste est bon.

    le 09/08/2017 à 11h16

  • tounsydu0069

    tounsydu0069

    bonjour je comprend pas mon probleme et j'arrive pas a soumettre

    le 18/06/2017 à 13h48

  • mram

    mram Administrateur

    Bonjour, vous avez un message d'erreur ou bien rien ne se passe ?

    le 21/06/2017 à 16h40

  • jeremy.didier77

    jeremy.didier77

    j'ai besoin d'aide je ne comprend pas pourquoi il me refuse mon code j'ai bien mis 10 pixel sur le 3 ème élément ..

    le 14/07/2017 à 11h30

  • mram

    mram Administrateur

    Bonjour, j'ai testé votre code et il fonctionne bien de mon côté, j'ai pu valider l'exercice.

    le 16/07/2017 à 10h53

  • francelinloic

    francelinloic

    Bonjour mon code ne fonctionne pas alors que normalement tout est bon

    le 11/09/2017 à 17h03

  • mram

    mram Administrateur

    Bonjour, c'est "font-size" avec un f minuscule ....

    le 12/09/2017 à 17h29

  • yoneskaddouri-91

    yoneskaddouri-91

    J'ai trouver mon erreur c’était "Arial" et non "Ariel" merci quand même

    le 22/12/2018 à 22h36

  • bressonfamily69-17

    bressonfamily69-17

    <li> style="font-size:16px; font-family: Arial">Voici un texte de grande taille en Arial.</li> l'attribut style est bien dans la balise ouvrante li?

    le 29/03/2019 à 16h08

index.html
<!DOCTYPE html> <html> <head> <title>La police doit changer</title> </head> <body> <h1 style="font-family: Arial">Démonstration de la force des polices</h1> <ol> <li>Voici un texte de grande taille en Arial.</li> <li>Ceci est un texte moyen en Verdana.</li> <li>Et ce texte est petit mais il est en Impact.</li> </ol> </body> </html>