Per ogni elemento è possibile definire almeno tre colori: il colore del testo, il colore di sfondo e il colore del bordo: color, background-color e border-color, (queste ultime verranno esaminate nei capitoli relativi allo sfondo ed ai bordi). La proprietà color viene ereditata anche dagli elementi discendenti, se non viene specificato esplicitamente un altro valore. Ci sono alcune sintassi che permettono di definire i valori di questa proprietà.

Colori principali

Sono 16 parole chiave che definiscono la palette VGA di windows. Purtroppo solo 16 colori sono pochi per esprimere al massimo la nostra creatività e quindi per questo abbiamo la possibilità di utilizzare altri metodi.

p {color:red;}

Colori #RRGGBB

Sono composti da 6 cifre esadecimali che definiscono le quantita di rosso (RR), verde (GG) e blue (BB).

p {color:#ff0000}

Colori #RGB

Come i precedenti, solo che le quantità di rosso, verde e blu sono definite da una sola cifra.

p {color:#f00}

Colori rgb(rrr%,ggg%,bbb%)

Con questa sintassi vengono specificati una lista di valori in percentuale separati da una virgola; come avrete già intuito “rrr” stà per red, “ggg” stà per green e “bbb” stà per blue.

p {color:rgb(100%, 0%, 0%)}

Colori rgb(rrr, ggg, bbb)

Come la sintassi precedente ma con la differenza che le quantità di red, green e blue sono definite da valori che variano da 0 a 255.

p {color:rgb(255,0,0)}

Inherit

La parola chiave inherit serve per specificare al browser di ereditare il colore dall’elemento “padre".

p {color:inherit}