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

140 Commentaires

  • noraidris621-20

    noraidris621-20

    bonjour, le ligne 11 <li>n°3 <li style="font-family:impact;font-size:10px">Et ce texte est petit mais il est en Impact.</li> c'est correct ou pas?

    le 25/02/2023 à 08h44

  • Patricio M

    Patricio M Admin

    La synthaxe n'est pas bonne...

    le 27/02/2023 à 11h12

  • goodsemani-65

    goodsemani-65

    <ol> <li style="font-size: 16px; font-family: Arial">Voici un texte de grande taille en Arial.</li> <li style="font-size:12px;font-family:Verdana">Ceci est un texte moyen en Verdana.</li> <li style="font-size:10px;font-family:Impact">Et ce texte est petit mais il est en Impact.</li> </ol> </body> </html>

    le 24/05/2022 à 21h19

  • meriam

    meriam Admin

    Bonjour, quel est votre problème exactement???

    le 25/05/2022 à 14h16

  • melles.cuscianna-91

    melles.cuscianna-91

    merci pour ces cours bien construits!!

    le 21/05/2022 à 16h22

  • meriam

    meriam Admin

    Bonjour, n'hésitez pas à demander de l'aide si vous trouvez des problèmes dans les exercices suivants.Bon travail.

    le 23/05/2022 à 11h13

  • n.zannouti-72

    n.zannouti-72

    <!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 06/05/2022 à 08h39

  • meriam

    meriam Admin

    Bonjour, vous devez ajouter l'attribut style.

    le 10/05/2022 à 22h04

  • bahachaouachi59-43

    bahachaouachi59-43

    aman zah rani whlet fi exercisse

    le 17/02/2022 à 13h43

  • meriam

    meriam Admin

    Bonjour, quelle est votre question exacetement ??

    le 17/02/2022 à 14h04

  • meriam

    meriam Admin

    Vous devez ajouter la taille du texte demandée par l'énoncé

    le 17/02/2022 à 14h05

  • arthurleg29-23

    arthurleg29-23

    Bonjour je ne vois pas mon erreur : message d'erreur : Vous devez avoir 3 balises <li> dans la balise <ol>.

    le 06/01/2022 à 17h36

  • meriam

    meriam Admin

    Bonjour, pour chaque li, une seule balise ouvrante (vous avez placé deux balises ouvrantes <li>

    le 07/01/2022 à 23h16

  • liza.hru-10

    liza.hru-10

    <!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 03/11/2021 à 17h19

  • meriam

    meriam Admin

    Bonjour, votre code fonctionne correctement.

    le 08/11/2021 à 21h53

  • djouma.daoud-10

    djouma.daoud-10

    bonjour, je ne comprends pas l'erreur de mon code. pouvez-vous m'aider svp ?

    le 12/08/2021 à 15h31

  • meriam

    meriam Admin

    Bonjour, pour le 1 er li de la liste, vous devez corrigez cette partie : font-size=16px; par font-size:16px;

    le 13/08/2021 à 11h35

  • djouma.daoud-10

    djouma.daoud-10

    bonjour, je ne comprends pas l'erreur de mon code. pouvez-vous m'aider svp ?

    le 11/08/2021 à 16h50

  • meriam

    meriam Admin

    Bonjour, vous devez ajouté deux points : entre la propriété font-size et la valeur du 1er élément li.

    le 12/08/2021 à 10h28

  • youdiakite75-41

    youdiakite75-41

    <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> vrai ou faux

    le 09/09/2020 à 15h07

  • meriam

    meriam Admin

    Bonjour, c'est votre problème?? car votre code est correct.

    le 09/09/2020 à 15h33

  • fadoua.lahkim-8

    fadoua.lahkim-8

    <!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>

    le 18/07/2020 à 09h27

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 20/07/2020 à 07h26

  • 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 à 14h08

  • yoneskaddouri-91

    yoneskaddouri-91

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

    le 22/12/2018 à 20h36

  • 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 à 11h14

  • meriam

    meriam Admin

    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 à 12h49

  • 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 à 12h30

  • mram

    mram Admin

    Bonjour, quel est le messqge d'erreur exactement ?

    le 16/09/2018 à 04h42

Pour publier un commentaire, vous devez vous connecter.
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>
http://localhost:8080