back to top

Cambiare il colore del testo in HTML

Per cambiare il colore del testo in HTML esistono diverse tecniche. La tecnica piรน diffusa fino a qualche anno fa รจ quella che prevede di utilizzare lโ€™attributo color del tag <font>, tuttavia non si tratta di un approccio corretto e moderno. La tecnica corretta per assegnare un colore ad un testo in HTML prevede, infatti, lโ€™utilizzo dei CSS. Vediamole entrambe.

Impostare un colore al testo mediante tag <font> (obsoleto)

รˆ la tecnica piรน vecchia e ancora oggi diffusa, soprattutto tra i โ€œnon adetti ai lavoriโ€. Vediamo un esempio di utilizzo del tag <font> per cambiare il colore di un testo HTML:

<p>
  Scrivo una parola in <font color="red">rosso</font>
</p>

Nellโ€™esempio qui sopra abbiamo impostato, per una parola del nostro paragrafo di testo, il colore rosso. Per farlo abbiamo valorizzato lโ€™attributo color del tag <font> con valore โ€œredโ€ (rosso), alternativamente avremmo potuto inserire un valore esadecimale in questo modo:

<font color="#FF0000">rosso</font>

Il risultato, da un ounto di vista visivo, sarebbe stato il medesimo: la parola โ€œredโ€, infatti, corrisponde al codice esadecimale #FF0000 (per una lista esaustiva di colori in HTML si puรฒ consultare lโ€™elenco disponibile a questa pagina).

La tecnica appena vista รจ vivamente sconsigliata in quanto lโ€™utilizzo del tag <font> รจ deprecato dalle nuove specifiche del linguaggio HTML, nonchรฉ contraria alle direttive del W3C che prevedono una netta separazione tra la struttura (HTML) e la presentazione (CSS) del documento.

Impostare un colore al testo mediante CSS

Lโ€™utilizzo di CSS รจ la strada preferibile per impostare un colore al testo allโ€™interno di una pagina web. Per farlo si utilizzerร , quindi, una classe ad hoc (definita in un foglio di stile esterno) oppure valorizzando opportunamente lโ€™attributo style del tag contenitore del testo che si desidera colorare.

Vediamo degli esempi che chiariranno meglio quanto appena detto.

Definire una classe

Come detto รจ possibile definire una classe allโ€™interno del nostro foglio di stile (che andremo a definire allโ€™interno dei tag <head> e </head>) al fine di applicare un dato colore ad una stringa di testo, ad esempio:

<style type="text/css">
.testo-rosso {
  color: #FF0000;
}
</style>

Da utilizzare in questo modo allโ€™interno del documento HTML:

<p>
  Scrivo una parola in <span class="testo-rosso">rosso</span>
</p>

Nel nostro esempio abbiamo applicato la classe ad un tag <span>, ma nulla ci vieta di applicarla ad altre tipologie di contenitori come paragrafi o div.

Impostare il colore mediante stile in linea

In alternativa, avremmo potuto impostare un colore al testo attraverso lโ€™utilizzo dellโ€™attributo style, definendo uno stile in linea per lโ€™elemento della pagina. Vediamo un esempio:

<p>
  Scrivo una parola in <span style="color: #FF0000;">rosso</span>
</p>

Questa sintassi รจ preferibile quando non si ha la possibilitร  di gestire un foglio di stile oppure quando la stilizzazione debba essere utilizzata una volta sola (quindi sarebbe inutile definire una classe ad hoc).

Qual รจ la tecnica migliore?

Come detto, lโ€™utilizzo del tag <font> รจ oggi da considerarsi deprecato, pertanto il suo utilizzo non puรฒ che essere sconsigliato. Va segnalato, tuttavia, che il tag <font> รจ ancora perfettamente riconosciuto e interpretato da tutti i browser in circolazione, pertanto, da un punto di vista funzionale, il suo utilizzo consente di raggiungere lo scopo desiderato.

Qualora si abbia la possibilitร , tuttavia, lโ€™utilizzo di CSS appare certamente la scelta preferibile, in quanto quella in grado di offrire una miglior compatibilitร  anche e soprattutto in prospettiva futura (oltre ad essere lโ€™unica soluzione qualora si desideri realizzare pagine web โ€œvalideโ€ da un punto di vista sintattico).

Altri contenuti interessanti

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML lโ€™attributo rel puรฒ essere utilizzato esclusivamente in...

Humans.txt โ€“ cosโ€™รจ, a cosa serve e come funziona

Humans.txt รจ un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca รจ una delle funzionalitร  piรน...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico รจ una collezione di pagine web...
Pubblicitร