Come Cambiare Colore del Testo in HTML

Co-redatto da Lo Staff di wikiHow

Questo metodo utilizza il tag HTML <font> per modificare il colore del testo, soluzione che non è più supportata con il nuovo standard HTML5. Al contrario, l'utilizzo di un foglio di stile CSS per definire quale colore dovrà assumere il testo inserito nei diversi elementi che compongono la tua pagina web è supportato sia in HTML sia in HTML5. Utilizzando i CSS sarai certo che le pagine web da te create saranno compatibili con tutti i browser internet in commercio.

Metodo 1

Metodo 1 di 2:

Utilizzare i CSS

1
Apri il file HTML relativo alla pagina o al sito web in esame. Il metodo migliore per modificare e gestire la colorazione del testo contenuto in una pagina web consiste nell'utilizzare i fogli di stile CSS. L'attributo <font> dei tag HTML non è più supportato nella nuova versione HTML5, quindi il metodo migliore consiste nel definire lo stile e l'aspetto grafico degli elementi presenti all'interno delle pagine web utilizzando un foglio di stile CSS.
- Questo metodo funziona anche utilizzando fogli di stile esterni (cioè il codice che definisce lo stile e l'aspetto dei vari elementi viene inserito in un file CSS separato da quelli che contengono il codice HTML che descrive le pagine web). Gli esempi proposti in questo articolo fanno riferimento a un file HTML che utilizza CSS interni (il codice dei fogli di stile è inserito direttamente nel codice HTML).
2
Posiziona il cursore del testo all'interno della sezione di codice compresa fra i tag <head>. Nel caso si voglia utilizzare un CSS interno, è necessario definire il relativo codice all'interno di questa sezione del codice HTML.
3
Per creare un CSS interno, utilizza il tag <style>. Quando questo tag HTML viene inserito all'interno della sezione racchiusa fra i tag <head>, il codice CSS presente al suo interno viene applicato automaticamente a qualunque elemento presente nella pagina web. Al termine di questo passaggio, il tuo file HTML di esempio dovrebbe avere un aspetto simile al seguente:^{[1]
X
Fonte di ricerca}
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Indica l'elemento di cui desideri modificare la colorazione del testo. Dovrai utilizzare la sezione racchiusa fra i tag <style> per definire lo stile e l'aspetto grafico che dovranno assumere i diversi elementi che comporranno la pagina web che stai creando. Ad esempio, per modificare lo stile del testo del corpo dell'intera pagina, dovrai usare questo codice:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Usa l'attributo HTML color: all'interno del selettore (chiamato anche combinatore) dell'elemento desiderato. L'attributo color: indica al browser internet quale colore del testo usare per un determinato elemento. Nel nostro esempio, l'elemento "body" è il selettore predefinito per identificare tutto il testo presente all'interno di una pagina web:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
Digita il colore che desideri assegnare al testo della pagina. Esistono tre modi per farlo: utilizzando il nome del colore, il relativo valore esadecimale o il codice RGB. Ad esempio, il colore blu può essere specificato tramite la parola blue, tramite la codifica RGB rgb(0, 0, 255) o tramite il relativo codice HEX #0000FF.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```

7

Aggiungi altri selettori per modificare la colorazione del testo degli altri elementi che compongono le tue pagine web. Per modificare la colorazione del testo di elementi diversi, dovrai semplicemente utilizzare selettori CSS differenti:

<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>Questo titolo apparirà di colore verde.</h1>

<p>Questo paragrafo apparirà di colore blu.</p>

Il corpo del testo apparirà di colore rosso.
</body>
</html>

8
Invece di modificare un elemento esistente, definisci una nuova classe CSS. Nei fogli di stile è possibile definire una nuova classe per poi applicarla a qualunque elemento HTML desiderato perché ne assuma immediatamente lo stile e l'aspetto grafico. Nel nostro esempio la classe ".redtext" modifica in rosso la colorazione del testo di tutti gli elementi a cui viene applicata:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">Questo titolo apparirà in rosso.</h1>
<p>Il testo di questo paragrafo apparirà con la colorazione predefinita.</p>
<p class="redtext">Mentre questo paragrafo apparirà in rosso.</p>

</body>
</html>
```
Pubblicità

Metodo 2

Metodo 2 di 2:

Utilizzare gli Attributi di Stile all'Interno del Codice HTML

1
Apri il file HTML che contiene il codice sorgente del tuo sito o pagina web. Per modificare l'aspetto grafico di un singolo elemento HTML, si possono utilizzare gli attributi di stile inserendoli direttamente nel codice sorgente della pagina web. Questa soluzione può rivelarsi molto utile quando è necessario modificare rapidamente l'aspetto di uno o due elementi. Per ovvi motivi, non è consigliabile usare questo metodo per gestire lo stile e l'aspetto di tutti gli elementi di una pagina web. In questo secondo caso, la soluzione ottimale prevede l'utilizzo dei fogli di stile CSS.^{[2]
X
Fonte di ricerca}
2
Individua l'elemento che desideri modificare all'interno del file HTML che contiene il codice sorgente della pagina web. Utilizzando gli attributi HTML relativi allo stile grafico è possibile modificare la colorazione del testo di qualunque elemento presente in una pagina web. Ad esempio, ipotizzando di voler modificare il colore del testo di un titolo specifico occorrerà per prima cosa individuare quest'ultimo elemento all'interno del file HTML:
```
<!DOCTYPE html>
<html>
<body>

<h1>Questo è il titolo che desideri modificare</h1>

</body>
</html>
```
3
Aggiungi l'attributo di stile corretto alla definizione dell'elemento desiderato. Digita style="" all'interno del tag di apertura dell'elemento che vuoi cambiare:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">Questo è il titolo che desideri modificare</h1>

</body>
</html>
```

4

Digita l'attributo color: all'interno delle "" dell'attributo "style". Nel nostro esempio otterremo:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:">Questo è il titolo che desideri modificare</h1>

</body>
</html>

5
Digita il codice relativo alla nuova colorazione che desideri conferire al testo. Come nel caso precedente, esistono tre modi per farlo: puoi utilizzare il nome del colore, il relativo valore esadecimale o il codice RGB. Ad esempio, per fare apparire il testo in giallo dovrai utilizzare una di queste codifiche: yellow;, rgb(255,255,0); o #FFFF00;:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">Adesso questo titolo apparirà in giallo.</h1>

</body>
</html>
```
Pubblicità

Consigli

Visitando questo URL http://www.w3schools.com/colors/colors_names.asp troverai un elenco di tutti i nomi dei colori supportati dal codice HTML, unitamente al codice esadecimale corrispondente.