L’acronimo CSS sta per Cascading Style Sheets che, tradotto in italiano, significa Fogli di Stile a Cascata.
La caratteristica principale dei fogli di stile, infatti, è l’ordine con cui vengono assegnate le proprietà alle regole, ovvero a cascata. Questo significa che se ad un elemento vengono assegnate due proprietà uguali ma con valore diverso, verrà interpretata l’ultima inserita. A livello pratico, dato il codice seguente:
p { color: black; }
p { color: red; }la seconda regola sovrascriverà la prima e quindi il testo assumerà colore rosso. La stessa cosa succede le due proprietà vengono assegnate all’interno della stessa regola:
p {
color: black;
color: red;
}Anche nel precedente esempio il testo verrà visualizzato con il colore rosso.
Un’altra caratteristica importante dei CSS è l’eredità delle proprietà. Sappiamo bene che la struttura di una pagina HTML è ad albero, quindi, una proprietà assegnata ad un nodo dell’albero si estende anche a tutti i figli di quel nodo. Vediamo un semplice esempio:
<div id="content">
<h1>Lorem ipsum dolor sit amet</h1>
</div>div#content { font-size: 10px; }
h1 { font-size: 120%; }Dato il codice CSS e la struttura della pagina HTML appena visti, la dimensione finale del testo contenuto nell’h1 sarà di 12 pixel. Questo accade perchè il tag h1 è contenuto nel div#content a cui è stato assegnato un valore iniziale di 10px. Il tag quindi calcola la sua dimensione finale partendo dalla proprietà assegnata al suo contenitore.
Negli esempi visti finora è stato facile calcolare le dimensioni finali del testo oppure determinare il colore dei paragrafi, questo perchè gli esempi forniti sono molto basilari. Nella realtà, però, la situazione è completamente differente e, quando i fogli di stile iniziano ad essere di dimensioni consistenti, determinare la specificità delle regole CSS potrebbe diventare molto complicato. Potremmo trovarci, ad esempio, nella situazione di regole che si sovrappongono in maniera errata. Per ovviare a questo problema la specifica del CSS ha fornito un metodo molto semplice per determinare la specificità delle proprietà.
Per specificità si intende la priorità che una regola ha sulle altre che si riferiscono allo stesso selettore. La proprietà con valore di specificità maggiore avrà la precedenza sulle altre; nel caso in cui due o più regole, come in precedenza, abbiamo tale valore uguale, verrà assegnata l’ultima inserita nell’ordine a cascata.