Graisse de police

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

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

Les valeurs numériques courantes pour font-weight incluent :

100: Fin
200: Extra-léger
300: Léger

400: Normal
500: Médium
600: Semi-gras

700: Gras
800: Extra gras
900: Noir

Les valeurs de mots-clés courantes pour font-weight incluent :

normal: Équivalent à 400
bold: Équivalent à 700

lighter: Spécifie une graisse plus légère que celle de l'élément parent
bolder: Spécifie une graisse plus épaisse que celle de l'élément parent

Par exemple :

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

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-weight 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-weight sur 900.
Écrivez une règle CSS qui cible l'élément <p>. Définissez le font-weight sur lighter.
Écrivez une règle CSS qui cible l'élément <div>. Définissez le font-weight sur 600.

Aide-mémoire

La propriété font-weight contrôle l'épaisseur ou la graisse du texte.

Valeurs numériques :

100 : Fin (Thin)
200 : Extra-léger (Extra Light)
300 : Léger (Light)
400 : Normal
500 : Moyen (Medium)
600 : Semi-gras (Semi Bold)
700 : Gras (Bold)
800 : Extra-gras (Extra Bold)
900 : Noir (Black)

Valeurs par mots-clés :

normal : Équivalent à 400
bold : Équivalent à 700
lighter : Plus léger que l'élément parent
bolder : Plus gras que l'élément parent

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Essayez vous-même

<html>
<head>
    <title>Font Weight</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>