Essere in grado di dare uno stile a diversi aspetti della tua pagina HTML è un'abilità importante per i web designer e gli sviluppatori. Per dare uno stile alle tue pagine web HTML con i colori e le dimensioni dei caratteri, devi avere familiarità con i CSS. Per scegliere come target la dimensione del carattere in modo specifico, puoi usare il CSS dimensione del font proprietà.

Se stai cercando un modo per modificare la dimensione del carattere HTML utilizzando CSS, abbiamo quello che fa per te. Immergiamoci iniziando con un'introduzione ai CSS dimensione del font proprietà.

Comprendere la proprietà CSS font-size

Il dimensione del font proprietà in CSS è utile quando è necessario modificare la dimensione del testo HTML. È possibile utilizzare questa proprietà per modificare la dimensione di ogni parte di testo in una pagina HTML o scegliere come target elementi specifici da modificare.

In genere si consiglia di scegliere come target elementi specifici poiché in genere non si desidera che tutto abbia le stesse dimensioni. Il testo che non segue una gerarchia visiva è difficile da scansionare e differenziare le intestazioni di livello superiore da quelle di basso livello.

In termini più semplici, non abusare del dimensione del font proprietà. Se vuoi che un'intestazione si distingua, ci sono diversi tag di intestazione HTML per questo. Dai un'occhiata al nostro Cheat sheet HTML Essentials per diversi tag, attributi e altro insieme a spiegazioni.

Il CSS dimensione del font la proprietà accetta due tipi di valori: assoluti e relativi.

Valori assoluti di lunghezza (es. px) sono fissi mentre quelli relativi (es. em e ex) sono flessibili. Ad esempio, per un'unità relativa ai caratteri come em, la dimensione è solitamente determinata dalla dimensione del carattere dell'elemento padre. Tuttavia, le unità relative ai caratteri basate su radice come rem sono influenzati dalla dimensione del carattere dell'elemento radice ().

Ognuno ha i suoi pro e contro, ma nell'essenza del mantenere le cose focalizzate, non ne discuteremo in questo articolo.

Come modificare la dimensione del carattere di un elemento HTML in CSS

Puoi modificare la dimensione del carattere del testo HTML utilizzando una sintassi CSS standard.

Innanzitutto, specifica il selettore (il testo che desideri modificare) e apri alcune parentesi graffe. Quindi, inserisci il dimensione del font seguita da due punti, specifica la dimensione specifica in cui desideri presentare il testo HTML e chiudilo con un punto e virgola.

Ecco la sintassi:

Selettore CSS {
 dimensione carattere: valore;
}

Per comprendere meglio il concetto, rivedere il seguente standard HTML che ha alcune righe di codice aggiuntive (un'intestazione e un paragrafo):

Questa è la mia prima voce

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Se vuoi cambiare la dimensione del carattere dell'elemento paragrafo, devi selezionarlo (tramite una classe, un tag o un id) e, usando il CSS dimensione del font proprietà, imposta un valore personalizzato con le tue unità preferite. Nel nostro esempio useremo pixel (px).

P {
 dimensione del carattere: 18px;
}

Sebbene il CSS in linea non sia generalmente consigliato nei progetti di grandi dimensioni, puoi anche usarlo per modificare le dimensioni del testo HTML. Prendendo appunti dal codice CSS esterno sopra, possiamo implementare la stessa cosa in linea in questo modo:

Questa è la mia prima voce

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Testo nel P Il tag HTML avrà ora una nuova dimensione personalizzata.

Imparentato: Suggerimenti e trucchi CSS essenziali che ogni sviluppatore dovrebbe conoscere

Risoluzione dei problemi di errori durante la modifica della dimensione del carattere HTML in CSS

Sebbene l'intero processo di modifica della dimensione del testo in CSS possa sembrare facile, potrebbe non essere sempre esattamente come ti aspetti. Se riscontri problemi, inizia controllando se hai salvato le modifiche nel tuo file (assicurati inoltre di collegare il tuo foglio CSS al tuo file HTML). In tal caso, prova a utilizzare il metodo inline, quindi aggiorna la pagina.

Se funziona, potrebbe esserci un problema con il tuo codice CSS. Prova a usare il !importante tag e, se funziona, deve esserci del codice in conflitto. Analizza il tuo codice CSS riga per riga per cercare di catturare quell'errore.

10 semplici esempi di codice CSS che puoi imparare in 10 minuti

Hai bisogno di aiuto con CSS? Prova questi esempi di codice CSS di base per cominciare, quindi applicali alle tue pagine web.

Leggi Avanti

Circa l'autore