Personalizzare lo stile delle pagine html: i CSS

Come abbiamo visto, attraverso l'attributo "style" possiamo personalizzare lo stile di un contenitore. Ma se dovessimo cambiare allo stesso modo lo stile di cento paragrafi anziché di uno soltanto? È chiaro che sarebbe molto lungo e dispendioso personalizzare l'attributo "style" per tutti i contenitori.
Per risolvere questo problema, i programmatori hanno quindi creato un sistema più rapido ed efficace per personalizzare lo stile delle pagine html: hanno creato i CSS, acronimo di "Cascade Style Sheets", che in italiano è traducibile con "Fogli di stile a cascata".
Quali vantaggi dà l'uso del CSS nel personalizzare lo stile delle pagine? È presto detto: permette di attribuire una solta volta lo stile ad un numero teoricamente illimitato di tag.
Come è possibile fare questa operazione? È sufficiente aggiungere al file html della pagina internet una parte che riguarda il css, seguendo alcune regole di scrittura precise.
Considera ad esempio questa pagina html; come puoi vedere, anche prima di visualizzare la pagina, potrai notare:
1) La presenza del tag <style> all'interno del tag <head> della pagina; le parentesi quadre con i puntini evidenziate in rosso indicano che proprio all'interno di questo tag andremo ad inserire tutte le informazioni che riguardano lo stile della pagina;
2) La presenza di un tag <h1>;
3) La presenza di cinque tag <div>; l'ultimo di questi ha l'attributo "classe" settato su "grande";
4) La presenza di tre paragrafi di testo: i primi due hanno l'attributo class con il nome "colore", il terzo con il nome "grande".

<html>

<head>

<title>

Il mio primo css

</title>

<style>

[...]

</style>

</head>

<body>

<h1>Questo è un titolo.</h1>

<div>Questo è un div.</div>

<div>Questo è un altro div.</div>

<div>Questo è il terzo div.</div>

<div>Questo è il quarto div.</div>

<div class="grande">Questo è l'ultimo div e ha l'attributo classe "grande".</div>

<p class="colore">Questo è il primo paragrafo con classe "colore".</p>

<p class="colore">Questo è il secondo paragrafo con classe "colore".</p>

<p class="grande">Questo è il primo paragrafo con classe "grande".</p>

</body>

</html>

esempio

Poniamo il caso di voler scrivere (1) il titolo in colore rosso, (2) i testi contenuti nei div in colore blu, (3) il testo contenuto nei paragrafi con classe "colore" di arancione e (4) il testo con classe "grande" con un carattere più grande rispetto ai precedenti: come fare?
Seguendo quanto abbiamo già spiegato in questa pagina, potremmo scrivere tutte le informazioni che servono usando l'attributo style="..." di ciascun tag. Tuttavia questo sistema è piuttosto lungo e complesso, poiché ci obbliga a riscrivere per ben nove volte l'attributo e le sue proprietà.
La seconda alternativa è quella di scrivere delle regole css all'interno del tag <style> presente nell'<head> del file html: questa sarà la soluzione più breve ed economica!

Vediamo come si fa! Ecco come dovremo scrivere la regola css, in modo che il browser legga correttamente le istruzioni e dia lo stile desiderato alla pagina:
1) All'interno del <style> indichiamo innanzitutto il selettore, e cioè uno o più tag a cui vogliamo che sia modificato lo stile;
2) Dopo aver indicato il selettore, apriamo le parentesi graffe, che conterranno la nostra dichiarazione, e cioè tutte e proprietà che andremo a modificare con i rispettivi valori. Come avrai notato, le proprietà e i valori attribuiti a ciascuna sono in lingua inglese: quindi, seguendo questo corso, avrai occasione di imparare anche qualche parola nuova!

REGOLA CSS
SELETTORE	DICHIARAZIONE
SELETTORE	Proprietà	Valore
h1	{color:	red;}
div	{color:	blue;}
.colore	{color:	orange;}
.grande	{font-size:	24px;}

Trascriviamo all'interno del tag <style> dell'<head> le quattro righe appena scritte con la sintassi corretta, come nell'esempio qui sotto.