Se alcune proprietà sono state sono state definite per lo stesso selettore da diversi fogli di stile, il valore sarà ereditato dal foglio di stile più specifico. 

Per esempio un foglio di stile esterno definisce lo stile seguente per un selettore h1:

h1
{
color: red;
text-align: left;
font-size: 8px;
}

Al tempo stesso un foglio di stile interno definisce queste proprietà per lo stesso selettore:

h1
{
text-align: right;
font-size: 20px;
}

Nel caso in cui la pagina con il foglio di stile interno risulti anche collegata al foglio di stile esterno, le proprietà per il selettore h1 saranno:

color: red;
text-align: right;
font-size: 20px;

Il colore viene ereditato dal foglio di stile esterno mentre per l’allineamento del testo e la dimensione del font vengono utilizzati i valori contenuti nel foglio di stile incorporato.

Facciamo un piccolo passo indietro e vediamo come inserire un foglio di stile CSS all’interno di un documento. Innanzi tutto bisogna distinguere tra:

• Fogli di stile esterni
• Fogli di stile interni
• Stili in linea

In aggiunta alla possibilità di definire uno stile per ogni elemento HTML, i CSS consentono di definire dei selettori “speciali” chiamati id e class.

I selettori di tipo id

I selettori di tipo id sono utilizzati per definire lo stile di un unico elemento. Possono essere applicati ad un qualunque elemento HTML attraverso l’attributo id e sono definiti anteponendo il simbolo “#” al nome scelto.

Esempio:

#paragrafo_rosso {
color: red;
font-size: 14px;
}

Lo stile definito sopra può essere applicato ad un qualunque elemento HTML. Per esempio:

<p id=”paragrafo_rosso”>Testo paragrafo</p>

I selettori di tipo classe

I selettori di tipo class, invece, sono utilizzati per definire lo stile di un gruppo di elementi. Questo consente di definire un particolare stile per una serie di elementi HTML utilizzando lo stesso selettore. I selettore di tipo classe possono essere applicati ad un qualunque elemento HTML attraverso l’attributo class ed è definito anteponendo il simbolo “.” al nome scelto.

Esempio:

.centra {
text-align: center;
}

E' anche possibile fare in modo che lo stile definito da una classe sia applicabile ad un solo specifico elemento HTML. Per esempio:

p.centra {
text-align: center;
}

In questo caso lo stile definito dalla classe .centra sarà applicabile esclusivamente ai paragrafi.

< Precedente Successiva >

I commenti sono utilizzati per spiegare il codice e sono utilissimi nel caso in cui si rendano necessarie delle modifiche a distanza di tempo.

I commenti in CSS iniziano con "/*" e terminano con "*/".

Esempio:

/*Questo è un commento*/
p {
font-family: Arial;
/*Questo è un altro commento*/
font-size: 14px;
}

< Precedente Successiva >

Una regola CSS si compone di due parti: il selettore e il blocco delle dichiarazioni:

Il selettore, di norma, è costituito dall'elemento HTML al quale si vuole attribuire uno stile.

Il blocco delle dichiarazioni è delimitato da due parentesi graffe all'interno delle quali possono trovare posto una o più dichiarazioni. Esse sono sempre costituite da una coppia:

• proprietà
• valore

Proprietà e valore sono separati dai due punti. Ogni dichiarazione è separata dalla successiva da un punto e virgola.

Per migliore la leggibilità è consigliabile andare a capo dopo ogni dichiarazione.

Esempio:

h1 {
color: red;
font-size: 12px;
}