Spessore del carattere

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 20 di 76.

In CSS, la proprietà font-weight viene utilizzata per controllare il grassetto o lo spessore del testo all'interno di un elemento HTML.

I valori numerici comuni per font-weight includono:

100: Sottile
200: Extra leggero
300: Leggero

400: Normale
500: Medio
600: Semigrassetto

700: Grassetto
800: Extra grassetto
900: Nero

I valori comuni delle parole chiave per font-weight includono:

normal: Equivalente a 400
bold: Equivalente a 700

lighter: Specifica un peso più leggero rispetto all’elemento genitore
bolder: Specifica un peso più marcato rispetto all’elemento genitore

Per esempio:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>), un paragrafo (<p>) e un elemento divisione (<div>). Il tuo compito è usare la proprietà font-weight per definire lo stile di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta font-weight su 900.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta font-weight su lighter.
Scrivi una regola CSS che selezioni l'elemento <div>. Imposta font-weight su 600.

Provalo tu

<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>