Come abbiamo visto precedentemente, una pagina html è una struttura costituita da parti elementari, definite tag, che si trovano in ordine gerarchico, l’una con l’altra, a seconda del loro annidamento e del conseguente livello di parentela.

Applicare uno stile ad uno o più elementi, significa prima di tutto astrarli dalla totalità: bisogna, sostanzialmente, effettuare una selezione, la quale può avvenire: per tag, per classe o per id.

Se, ad esempio, desideriamo applicare uno stile a tutti i paragrafi, rendendo il loro contenuto di colore rosso, con una dimensione di carattere pari a 15px, dobbiamo usare il codice:

p{

	color:red;

	font-size:15px;

}

e selezionare, così, tutti gli elementi secondo il loro tag.

Se invece vogliamo applicare tale stile solo ad alcuni paragrafi, dovremo effettuare un’ulteriore selezione, filtrando, gli elementi per evitare di prenderli tutti senza distinzione. La prima cosa da fare è associare una classe, cioè un attributo specifico dei tag html, ai soli paragrafi che intendiamo modificare:

<p>Su questo paragrafo non verrà applicato alcuno stile css.</p>
<p>Anche su questo paragrafo non verrà applicato alcuno stile css.</p>
<p class="red15">Il testo di questo paragrafo sarà di colore rosso e avrà una dimensione di 15px.</p>
<p class="red15">Anche questo testo sarà di colore rosso e avrà una dimensione di 15px.</p>

Abbiamo quindi creato una classe di nome red15 (è sempre bene associare dei nomi che diano l’idea di ciò che la classe effettivamente produce come risultato) e l’abbiamo attribuita a due dei cinque paragrafi.

A questo punto quindi è necessario associare alla classe le regole di stile:

.red15{

	color:red;

	font-size:15px;

}

Come possiamo notare, il selettore, non è più il nome del tag, bensì il nome della classe, preceduto da un punto “.”.

D’ora in poi, ogni tag (p, span, div, ecc… ), al quale assoceremo la classe red15, sarà stilisticamente formattato secondo queste regole css.

Un’ulteriore selezione può essere effettuata, stabilendo che la classe valga solo per un determinato tag. In questo caso, se volessimo applicare le regole solo ai paragrafi che possiedono la classe e non a tutti gli altri tag, dovremmo far precedere il selettore dal nome del tag, in questo modo:

p.red15{

	color:red;

	font-size:15px;

}

Tale precisazione, impedirà a div, span o altro (al di fuori di p), di ottenere le regole di stile della classe, pur possedendola. Per cui:

<span class="red15">Anche questo testo, dentro span, non si formatterà secondo la classe red15</span>

Solo questo testo, dentro p, si formatterà secondo la classe red15

Le classi possono essere applicate a più elementi nella stessa pagina html e allo stesso elemento possono essere associate una o più classi diverse: basta scriverle all’interno dell’attributo class, una di seguito all’altra, separandole con uno spazio. Ad esempio:

Il testo di questo paragrafo, sarà di colore rosso e di dimenzione 15px per effetto della classe red15 e avrà un bordo di 1px verde per effetto della classe border_green

.red15{

	color: red;

	font-size: 15px;

}

.border_green{

	border-color: green;

	border-style: solid;

	border-width: 1px;

}

Quando la selezione diventa più esclusiva si ricorre ad una tipologia di selettore differente: l’id. L’id è un attributo dei tag html, può essere affiancato alle classi e, a differenza di queste, deve essere presente una sola volta nella pagina. Se per esempio ci trovassimo nella condizione di dover distinguere, a livello di css, quale è il primo, il secondo o il terzo paragrafo, in un testo composto da tre paragrafi ognuno dei quali stilisticamente identici, dovremmo associare ad ognuno di essi un identificativo specifico:

<p class="red15">Questo è un paragrafo</p>
<p class="red15">Anche questo è un paragrafo</p>
<p id="terzo" class="red15">E anche questo è un paragrafo</p>

Come possiamo notare, tutti i p possiedono la classe red15, la quale conferisce loro una uniformità di stile, e un id diverso che invece li rende in qualche modo diversi l’uno dall’altro (anche se al momento solo in via teorica in quanto non esistono regole associate).

Immaginiamo a questo punto di dover attribuire ai tre elementi, sfondi diversi:

#primo{

	background-color:green;

}

#secondo{

	background-color:pink;

}

#terzo{

	background-color:blue;

}