I fogli di stile CSS permettono di intervenire su una molteplicità di aspetti degli elementi di testo. In questa guida vedremo come utilizzare la proprietà color per attribuire un colore ad un elemento testuale di una pagina HTML. Si tratta evidentemente di una delle proprietà più utilizzate per personalizzare un documento e migliorarne la leggibilità.
La proprietà color nei CSS
Come al solito assumiamo come riferimento un breve spezzone di codice di un foglio di stile CSS:
p {color: red;}
h1 {color: #cc6600;}
La prima riga del codice indica al browser che il testo dei paragrafi (elemento p di HTML) andrà rappresentato con il colore rosso (red in inglese). La seconda riga del codice riguarda invece i rotoli di primo livello (elemento h1 di HTML) che verranno rappresentati con una tonalità di arancio rappresentata dal codice esadecimale #cc6600.
La descrizione dei colori nei CSS
Dai due esempi descritti sopra possiamo subito osservare che la proprietà color in un foglio di stile CSS può utilizzare diverse tipologie di valori:
- Nel primo esempio si è utilizzata la parola chiave red per indicare il rosso. Le parole utilizzabili allo stesso modo sono: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, purple, red, silver, teal, olive, white e yellow. Si tratta in pratica di una tavolozza di 16 colori base propri dello standard VGA.
- Nella seconda riga del codice CSS invece si è utilizzata una rappresentazione esadecimale dei colori che permette di utilizzare una tavolozza decisamente più estesa. Esistono molti strumenti per determinare il codice esadedimale di un colore. Ad esempio il programma LazPaint, di cui abbiamo spesso parlato in passato, visualizza costantemente questo genere di informazione. Anche Wikipedia offre una colorata pagina riassuntiva con i codici esadecimali di centinaia di colori.
- Anche se meno utilizzato, color accetta anche la notazione RGB.