Taille de police

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 19 sur 76.

En CSS, la propriété font-size sert à contrôler la taille du texte dans 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 la taille des polices.

Ems (em) : une unité relative basée sur la taille de 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 basée sur la taille de police de l’élément racine (<html>). Cette unité assure une plus grande cohérence dans tout 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 police de l’élément parent, semblable à 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 police de tous les éléments <p> (paragraphe) est définie sur 16px, tous les titres <h1> sont définis sur 2.5em (ce qui sera relatif à la taille de police de leur élément parent), la taille de police de base du document est définie sur 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 police de leur élément parent).

Défi

Facile

Un document HTML contenant un titre (<h1>), un paragraphe (<p>) et une division (<div>) vous est fourni. 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 font-size sur 40px.
Écrivez une règle CSS qui cible l’élément <p>. Définissez font-size sur 1.2em.
Écrivez une règle CSS qui cible l’élément <div>. Définissez font-size sur 120%.

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>