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.
Indice
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).
