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 est utilisée pour contrôler la taille du texte au sein 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. Il s’agit de l’unité la plus simple et la plus couramment utilisée pour définir les tailles de police.

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 font de l’élément racine (<html>). Cette unité offre une meilleure cohérence dans tout le document, car elle n’est pas affectée par la taille de font des éléments parents.

Pourcentages (%) : Une unité relative basée sur la taille de police de l’élément parent, similaire à em. Par exemple, si l’élément parent a une taille de police de 16px, alors 100% équivaut à 16px, 150% équivaut à 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> (paragraphes) 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 portant la classe small-text ont une taille de police de 80% (qui sera relative à la taille de police de leur élément parent).

Défi

Facile

On vous donne 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 appliquer un style à ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l’élément <h1>. Définissez font-size sur 32px.
É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%.

REQUIRED OUTPUT FORMAT: [Votre contenu traduit ici]

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>