Come cambiare i colori dei caratteri del sito Web con CSS

CSS ti dà il controllo sull'aspetto del testo nelle pagine web che crei e gestisci. In questa guida, ti mostriamo come modificare i colori dei caratteri in CSS utilizzando parole chiave di colore, codici colore esadecimali o numeri di colore RGB.

Come usare gli stili CSS per cambiare il colore del carattere

I valori di colore possono essere espressi come parole chiave di colore, numeri di colore esadecimali o numeri di colore RGB. Per questa lezione, avrai bisogno di un documento HTML per vedere le modifiche CSS e un file CSS separato allegato a quel documento. Esamineremo l'elemento paragrafo, in particolare.

Usa le parole chiave dei colori per cambiare i colori dei caratteri

Per cambiare il colore del testo per ogni paragrafo nel tuo file HTML, vai al foglio di stile esterno e digita p { }. Posiziona il colore proprietà nello stile seguito da due punti, come p { colore: }. Quindi, aggiungi il valore del colore dopo la proprietà, terminandolo con un punto e virgola. In questo esempio, il testo del paragrafo viene modificato nel colore nero:

p {
colore nero;
}

Usa valori esadecimali per cambiare i colori dei caratteri

L'uso di parole chiave di colore per modificare il testo in rosso, verde, blu o in qualche altro colore di base non ti darà la precisione che potresti cercare quando crei diverse sfumature di quei colori. Ecco a cosa servono i valori esadecimali.

Questo stile CSS può essere utilizzato per colorare di nero i tuoi paragrafi perché il codice esadecimale #000000 si traduce in nero. Potresti anche usare la stenografia con quel valore esadecimale e scriverlo come #000 con gli stessi risultati.

p {
colore: #000000;
}

I valori esadecimali funzionano bene quando hai bisogno di un colore che non sia semplicemente nero o bianco. Ad esempio, questo codice esadecimale ti dà la possibilità di impostare una tonalità di blu molto specifica, un blu di fascia media, simile all'ardesia:

p {
colore: #2f5687;
}

Hex funziona impostando i valori RGB (rosso, verde, blu) di un colore separatamente con valori in base sedici. Ecco perché contengono le lettere UN attraverso F oltre alle cifre 0 attraverso 9.

Ogni colore, rosso, verde e blu, riceve il proprio valore a due cifre. 00 è il valore più basso possibile, mentre FF è il più alto. I colori sono elencati in ordine RGB in un esadecimale, quindi le prime due cifre rappresentano il valore del rosso e così via.

Usa i valori di colore RGBA per cambiare i colori dei caratteri

Infine, puoi utilizzare i valori di colore RGBA per modificare i colori dei caratteri. RGCA è supportato in tutti i browser moderni, quindi puoi utilizzare questi valori con la certezza che funzionerà per la maggior parte dei visualizzatori, ma puoi anche impostare un facile fallback.

Questo valore RGBA è lo stesso del colore blu ardesia specificato sopra:

p {
colore: rgba (47,86,135,1);
}

I primi tre valori impostano i valori Rosso, Verde e Blu e il numero finale è l'impostazione alfa per la trasparenza. L'impostazione alfa è impostata su 1 per indicare il 100%, quindi questo colore non ha trasparenza. Se imposti quel valore su un numero decimale, come .85, si traduce in opacità dell'85 percento e il colore sarebbe leggermente trasparente.

Se vuoi rendere sicuri i tuoi valori di colore, copia questo codice CSS:

p {
colore: #2f5687;
colore: rgba (47,86,135,1);
}

Questa sintassi imposta prima il codice esadecimale e poi sovrascrive quel valore con il numero RGBA. Ciò significa che qualsiasi browser più vecchio che non supporta RGBA otterrà il primo valore e ignorerà il secondo.

È importante tenere presente che la proprietà color funziona su qualsiasi elemento di testo HTML in CSS. Puoi, ad esempio, cambiare tutti i colori dei tuoi link. Questo esempio renderà i tuoi link di un verde brillante:

un {
colore: #16c616;
}

Funziona anche con più elementi contemporaneamente. Puoi impostare ogni livello del titolo contemporaneamente. Ad esempio, questo imposterà tutti gli elementi del titolo su un colore blu notte:

h1, h2, h3, h4, h5, h6 {
colore: #020833;
}

Trovare i valori esadecimali o RGBA per i tuoi colori non è sempre facile. La maggior parte dei web designer utilizzerà un programma di modifica delle immagini, come Photoshop o GIMP, per generare i codici esatti. Puoi anche trovare comodi strumenti per la selezione dei colori online, come questo da w3schools.

Altri modi per modellare una pagina HTML

I colori dei caratteri possono essere modificati con un foglio di stile esterno, un foglio di stile interno o uno stile in linea all'interno del documento HTML. Tuttavia, le migliori pratiche impongono di utilizzare un foglio di stile esterno per i tuoi stili CSS.

Un foglio di stile interno, che sono stili scritti direttamente nella "testa" del documento, vengono generalmente utilizzati solo per piccoli siti Web di una pagina. Gli stili in linea dovrebbero essere evitati poiché sono simili ai vecchi tag "font" di cui ci siamo occupati molti anni fa. Questi stili in linea rendono molto difficile gestire lo stile del carattere poiché devi cambiarli ad ogni istanza dello stile in linea.