Taille de police

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 19 sur 76.

En CSS, la propriété font-size est utilisée pour contrôler la taille du texte à l'intérieur d'un élément HTML.

Voici quelques unités courantes utilisées pour spécifier les tailles de police :

Pixels (px) : Une unité absolue qui spécifie la taille de la police en pixels. C'est l'unité la plus simple et la plus couramment utilisée pour définir les tailles de police.

Ems (em) : Une unité relative qui est basée sur la taille de la police de l'élément parent. Par exemple, si l'élément parent a une taille de police de 16px, alors 1em est égal à 16px, 2em est égal à 32px, et ainsi de suite.

Rems (rem) : une unité relative qui est basée sur la taille de police de l'élément racine (<html>). Cette unité offre plus de cohérence à travers le document, car elle n'est pas affectée par la taille de police des éléments parents.

Pourcentages (%) : Une unité relative basée sur la taille de la police de l'élément parent, similaire à em. Par exemple, si l'élément parent a une taille de police de 16px, alors 100% est égal à 16px, 150% est égal à 24px, et ainsi de suite.

Par exemple :

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Dans cet exemple, la taille de la police de tous les éléments <p> (paragraphe) est fixée à 16px, tous les titres <h1> sont fixés à 2.5em (ce qui sera relatif à la taille de la police de leur élément parent), la taille de police de base du document est fixée à 1.4rem, et tous les éléments ayant la classe small-text ont une taille de police de 80% (ce qui sera relatif à la taille de la police de leur élément parent).

Défi

Facile

Vous disposez d'un document HTML avec un titre (<h1>), un paragraphe (<p>) et une division (<div>). Votre tâche consiste à utiliser la propriété font-size pour styliser ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez le font-size sur 32px.
Écrivez une règle CSS qui cible l'élément <p>. Définissez le font-size sur 1.2em.
Écrivez une règle CSS qui cible l'élément <div>. Définissez le font-size sur 120%.

Aide-mémoire

La propriété font-size contrôle la taille du texte à l'intérieur d'un élément HTML.

Unités courantes pour les tailles de police :

Pixels (px) : Unité absolue spécifiant la taille de la police en pixels
Ems (em) : Unité relative basée sur la taille de la police de l'élément parent
Rems (rem) : Unité relative basée sur la taille de la police de l'élément racine
Pourcentages (%) : Unité relative basée sur la taille de la police de l'élément parent

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Essayez vous-même

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>