Articolo originale: HTML Font Style – How to Change Text Color and Size with an HTML Tag
Quando programmi in HTML e scrivi del testo, sicuramente non lo lascerai così com'è perché vuoi che abbia un bell'aspetto.
Per fare ciò devi cambiare il suo aspetto attraverso le proprietà color e font-size del CSS.
In questo tutorial, ti mostrerò due modi diversi per migliorare l'estetica dei tuoi testi HTML.
Sintassi di base di font-size
selettore {
font-size: valore;
color: valore;
}
Come modificare la dimensione e il colore del testo all'interno di un tag HTML
Puoi cambiare il colore e la dimensione del testo direttamente all'interno del suo tag modificando le proprietà color e font-size. Questo modalità è detta CSS "inline" e per utilizzarla viene adoperato l'attributo style in HTML.
Nel codice HTML qui sotto, cambieremo il colore e la dimensione del testo freeCodeCamp.
<h1>freeCodeCamp</h1>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Nel browser apparirà così:
Per modificare la dimensione del testo, utilizzeremo l'attributo style, quindi imposteremo un valore con la proprietà font-size in questo modo:
<h1 style="font-size: 4rem">freeCodeCamp</h1>
Ora nel browser il testo apparirà così:
Se ti stai chiedendo cosa sia il rem, è un'unità di misura. 4rem equivalgono a 64 pixel, perché 16px equivale a un 1rem, a meno che non cambi la font-size della radice (html) in un altro valore.
Per cambiare il colore del testo, puoi utilizzare l'attributo style, quindi impostare un valore con la proprietà color:
<h1 style="color: #2ecc71">freeCodeCamp</h1>
Questo è ciò che ora appare nel browser:
La combinazione delle proprietà font-sizee color ci dà questo nel browser:
Con il codice:
<h1 style="font-size: 4rem; color: #2ecc71">freeCodeCamp</h1>
Come modificare la dimensione e il colore del testo in un file CSS esterno
Puoi anche modificare il colore e la dimensione del testo in un foglio di stile esterno. Ricorda però di collegare il CSS esterno nella sezione head del tuo HTML.
La sintassi di base è questa:
<link rel="stylesheet" href="percorso-del-file-css">
Ora, per modificare la dimensione e il colore del testo del testo freeCodeCamp, devi selezionarlo nel foglio di stile e applicargli le proprietà e i valori appropriati.
Ricorda che questo è il nostro codice HTML:
<h1>freeCodeCamp</h1>
Per modificare il colore e la dimensione del testo seleziona l'elemento (h1) e assegna i valori alle proprietà color e font-size:
h1 {
color: #2ecc71;
font-size: 4rem;
}
Vedrai lo stesso risultato nel browser:
In Conclusione
Spero che questo tutorial ti dia le conoscenze per poter cambiare la dimensione e il colore del tuo testo HTML in modo che abbia l'aspetto che desideri.
Grazie per aver letto e continua a programmare.