Come colorare lo sfondo div
Colorare lo sfondo di un'area div è molto semplice con il linguaggio CSS. L'attributo background-color ci permette di definire il colore di sfondo dell'area div, in modo diretto e senza troppe difficoltà.
Un esempio pratico
Facciamo un esempio pratico. Ipotizziamo di avere un'area div e di volerla colorare di grigio chiaro. Guardando la tabella dei colori sappiamo già che il codice del colore grigio chiaro è #CCCCCC o, in forma abbreviata, #CCC. Per colorare di grigio lo sfondo di tutte le aree div possiamo modificare la sezione HEAD del documento HTML nel seguente modo:
<html>
<head>
<style type="text/css">
div { background-color:#CCCCCC; }
</style>
</head>
<body>
<DIV>prova div con sfondo grigio</DIV>
</body>
</html>
Quando il browser incontra l'attributo background-color nel tag div colora automatica di grigio lo sfondo dell'area, senza alcun intervento da parte nostra. Il risultato a video del precedente esempio è il seguente:
Come colorare più Div con colori di sfondo diversi
Talvolta, anzi spesso, può capitare di voler colorare le aree div in modo diverso. A volte con lo sfondo grigio, altre con quello rosso, giallo, ecc. Come possiamo fare? Il linguaggio CSS ci offre due possibilità. La prima strada consiste nel definire l'area div con un nome specifico, in modo tale da richiamare nel codice html il colore che ci interessa.
<html>
<head>
<style type="text/css">
.grigio { background-color:#CCCCCC; }
.giallo { background-color:#FFFF00; }
</style>
</head>
<body>
<DIV class="grigio">prova div con sfondo grigio</DIV>
<DIV class="giallo">prova div con sfondo giallo</DIV>
</body>
</html>
Come colorare occasionalmente lo sfondo di un singolo Div
Alternativamente possiamo decidere di richiamare il colore di sfondo direttamente nel tag div, nella sezione BODY, senza dover definire la classe nella sezione head. È un modo meno pulito di lavorare ma, a volte, è utile. Questo secondo metodo è utilizzabile soprattutto quando l'esigenza di colorare lo sfondo di un div capita occasionalmente o raramente. In questo caso è inutile appesantire il CSS dell'intero sito web con nuove classi quando soltanto poche pagine vi faranno ricorso.
<html>
<head>
</head>
<body>
<DIV style="background-color:#CCCCCC">prova div con sfondo grigio</DIV>
<DIV style="background-color:#FFFF00">prova div con sfondo giallo</DIV>
</body>
</html>
Come viene visualizzato lo sfondo Div nel browser
Il risultato a video è il medesimo per entrambi gli ultimi due esempi. Il browser interpreta gli attributi dei due tag Div e visualizza il primo Div con lo sfondo grigio e il secondo Div con lo sfondo giallo.
In questa pagina abbiamo visto come colorare lo sfondo dell'area div con il linguaggio CSS. Negli esempi abbiamo utilizzato il colore grigio e il colore giallo. Per colorare lo sfondo del tag <div> con altri colori è sufficiente far riferimento alla tavolozza dei colori. Semplice, no?
