Dimensione del carattere

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

In CSS, la proprietà font-size viene utilizzata per controllare la dimensione del testo all’interno di un elemento HTML.

Ecco alcune unità comuni utilizzate per specificare le dimensioni dei caratteri:

Pixel (px): Unità assoluta che specifica la dimensione del carattere in pixel. È l’unità più semplice e comunemente usata per impostare le dimensioni dei caratteri.

Ems (em): un'unità relativa basata sulla dimensione del carattere dell'elemento genitore. Ad esempio, se l'elemento genitore ha una dimensione del carattere di 16px, allora 1em equivale a 16px, 2em equivale a 32px e così via.

Rem (rem): Un’unità relativa basata sulla dimensione del carattere dell’elemento radice (<html>). Questa unità garantisce maggiore coerenza in tutto il documento, poiché non è influenzata dalla dimensione del carattere degli elementi genitori.

Percentuali (%): un'unità relativa basata sulla dimensione del carattere dell'elemento genitore, simile a em. Per esempio, se l'elemento genitore ha una dimensione del carattere di 16px, allora 100% equivale a 16px, 150% equivale a 24px e così via.

Per esempio:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

In questo esempio, la dimensione del carattere di tutti gli elementi <p> (paragrafo) è impostata su 16px, tutte le intestazioni <h1> sono impostate su 2.5em (che sarà relativa alla dimensione del carattere del loro elemento genitore), la dimensione base del carattere del documento è impostata su 1.4rem e tutti gli elementi con la classe small-text hanno una dimensione del carattere pari a 80% (che sarà relativa alla dimensione del carattere del loro elemento genitore).

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-size per definire lo stile di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta font-size su 32px.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta font-size su 1.2em.
Scrivi una regola CSS che selezioni l'elemento <div>. Imposta font-size su 120%.

Provalo tu

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