• 15 heures
  • Facile
Licence

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/02/2024

Changez l'apparence du texte

Comme vous avez pu le voir dans la vidéo juste au-dessus, nous allons maintenant en profiter pour mettre en forme le texte de nos pages.

Changez la taille du texte avec la propriété CSS font-size

Pour modifier la taille du texte, on utilise la propriété CSS font-size et ensuite, on indique :

  • une taille absolue ;

  • ou une taille relative.

Donnez une taille au texte avec une valeur absolue en  px  

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :

font-size: 16px;

Les lettres auront une taille de 16 pixels :

On voit l'image de la lettre A qui est zoomée de manière à voir les pixels. En hauteur, on en compte 16.

…ou optez pour une valeur relative en em  (recommandé)

Il y a plusieurs moyens d'indiquer une valeur relative. Une des plus fréquentes consiste à indiquer la taille en em.

  • Le texte a une taille normale avec  1em .

  • Le texte est plus grand avec une valeur supérieure à 1, comme  1.3em .

  • Le texte est plus petit avec une valeur inférieure à 1, comme  0.8em.

Si on le fait en HTML :

<p class="elem1">Élément 1 : 1em</p>
<p class="elem2">Élément 2 : 1.3em</p>
<p class="elem3">Élément 3 : 2em</p>

… et qu’on y associe le CSS ci-dessous :

.elem1 {
font-size: 1em;
}

.elem2 {
font-size: 1.3em;
}

.elem3 {
font-size: 2em;
}

… on obtient alors le résultat suivant :

La taille du texte change proportionnellement à la valeur que l'on donne en unité em.
La taille change avec l'unité em

Ok d'accord, mais je ne comprends pas la différence avec le pixel, à quoi ça sert une taille relative ?

Une valeur absolue en pixel comme 16px est fixe. C'est comme si je vous disais d'indiquer la taille du texte en millimètres. Si je choisis de mettre la taille d'un texte à 2 millimètres et que vous regardez ma page web depuis votre smartphone vous devriez pouvoir le lire. Maintenant, si mon site web s'affiche sur l'écran d'un stadium, à votre avis que se passera-t-il ? C'est pour cela que l'on recommande une taille relative. 16 pixels est une taille standard pour lire un texte mais peut ne pas suffire selon l'écran sur lequel il s'affiche. Une valeur relative permet de choisir une taille de la même manière qu'on utiliserait un pourcentage.

Choisissez une police avec la propriété CSS font-family

La propriété CSS qui permet d'indiquer la police à utiliser est font-family :

balise
{
    font-family: nom-police;
}

Voici une liste de polices sans sérif qui fonctionnent nativement sur la plupart des navigateurs :

  • Arial Black ;

  • Futura ;

  • Helvetica ;

  • Impact ;

  • Trebuchet MS ;

  • Verdana.

Une police sérif dessine un empattement aux extrémités des caractères de lettres et de chiffres. Ce qui n'est pas le cas d'une police sans sérif.
Différence entre sérif et sans sérif

C'est tout à fait possible d'utiliser n'importe quelle police sur son site, et ce sur la plupart des navigateurs. Pour cela, il existe plusieurs méthodes, comme importer une police depuis le site de Google Fonts.

D'ailleurs, comment fait-on pour intégrer une police de Google Fonts dans nos fichiers HTML et CSS ?

Pour cela, rendez-vous sur Google Fonts pour sélectionner une police, puis :

  1. Copiez les balises <link> dans le <head> </head> du fichier HTML.

  2. Utilisez la propriété font-family dans le fichier CSS pour déclarer que vous voulez utiliser cette police.

On va chercher dans Google Font le code à copier coller dans le fichier HTML.
Le code a copier dans le fichier HTML

Par exemple, pour la police Roboto, on vient coller dans le HTML :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Et on l'utilise dans le CSS en déclarant dans notre sélecteur :

font-family: 'Roboto', sans-serif;

Mettez du texte en italique avec la propriété CSS font-style

En CSS, on donne une valeur à font-style  pour dire si on veut que du texte soit en italique ou non :

  • italic  : le texte sera mis en italique ;

  • normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :

em
{
    font-style: normal;
}
La valeur nommée italic associée à la propriété font-style permet de mettre le texte en italique.
Différence entre du texte normal et du texte italique

Mettez du texte en gras avec la propriété CSS font-weight

Pour varier la graisse d'un texte, on utilise la propriété CSS font-weight à laquelle on associe une valeur, au choix :

  1. bold : le texte sera en gras ;

  2. normal : le texte sera écrit normalement (par défaut) ;

  3. thin: le texte est plus fin.

Mais il est également possible d'être plus précis et d'indiquer l'épaisseur du texte avec une valeur numérique allant de 100 à 900, du moins épais au plus épais :

Le choix de l'épaisseur (variant de 100 à 900) permet d'afficher du texte plus ou moins gras.
Les différentes graisses (ou épaisseurs)

Pour appliquer les différents styles de texte (épaisseur et italique) pour les polices importées, il faut bien s'assurer d'avoir importé les styles de polices correspondants. Ainsi, pour utiliser la police Roboto en italique et bold, il faudra bien avoir importé dans votre code :

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700&display=swap" rel="stylesheet">

Soulignez du texte avec la propriété CSS text-decoration

La propriété CSS text-decoration permet, entre autres, de souligner le texte, mais pas seulement. Voici quelques-unes des différentes valeurs qu'elle peut prendre :

  • underline: souligné ;

  • line-through: barré ;

  • none: normal (par défaut, sauf dans le cas des liens).

Ce CSS va vous permettre de tester les effets de text-decoration:

Cette capture d'écran montre les effets des valeurs underline (souligné), line-through (barré), et none (aucune valeur appliquée à text-decoration).
Les différentes valeurs de text-decoration

Alignez du texte avec la propriété CSS  text-align

Le propriété CSS text-align permet d'aligner du texte selon la valeur qu'on lui donne :

  • left : le texte sera aligné à gauche (c'est le réglage par défaut) ;

  • center : le texte sera centré ;

  • right : le texte sera aligné à droite ;

Cette capture d'écran montre le résultat des valeurs left, center et right appliquées à la propriété text-align.
Les 3 options d'alignements classiques

  • justify  : le texte sera “justifié”.

Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

À vous de jouer !

Maintenant que vous avez appris comment mettre du texte en forme, vous allez pouvoir appliquer cela au projet de Robbie Lens. Pour cela, vous allez :

  • Importer les deux polices principales du projet avec Google Font : Montserrat et Manrope.

  • Assigner les propriétés de polices suivantes :

    • les titres H1 :

      • 3.5em  

      • en couleur  #A5B4FC  

      • police Montserrat

    • les paragraphes :

      • 1.1em 

      • police Manrope

    • les listes :

      • 1em

      • police Manrope

    • les liens :

      • enlever le soulignement

      • 1em

      • police Manrope

  • Remplacer les  <span class="important"></span>  par des éléments  em  tout en gardant le même style.

En résumé

  • On modifie la taille du texte avec la propriété CSS font-size.

  • On peut indiquer la taille en pixels, comme16px ; ou encore en “em”, comme 1.3em.

  • On indique la police du texte avec la propriété CSS  font-family . 

  • De nombreuses propriétés de mise en forme du texte existent : font-style pour l'italique, font-weight pour la mise en gras, text-decoration pour le soulignement.

  • Le texte peut être aligné avec la propriété CSS text-align  .

Bravo ! Vous venez encore d'ajouter une nouvelle corde à votre arc avec la mise en forme du texte. À partir de maintenant, dans mes démonstrations de code, j'utiliserai uniquement une police "sans-sérif". Dans le prochain chapitre, nous allons apprendre à ajouter de la couleur et un fond. Alors à tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite