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

  • 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

  • mram

    mram Admin

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

    le 24/06/2016 à 18h53

  • 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

  • patrice.francois2

    patrice.francois2

    Même problème pour moi!?

    le 24/12/2015 à 17h43

20 Commentaires

  • 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

  • yoneskaddouri-91

    yoneskaddouri-91

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

    le 22/12/2018 à 22h36

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>