Sono Andrea Tonin di Rovigo, sono web-designer di professione. Il mio lavoro consiste nel realizzare pagine web per clienti esigenti che richiedono interfacce di navigazione accattivanti e personalizzate. Nel mio lavoro una buona conoscenza di CSS è indispensabile. Ho deciso di condividere alcune delle mie conoscenze con voi tramite questo corso pratico di CSS. Spero vi possa essere utile 
In CSS un concetto chiave per comprendere come vengono applicati le dichiarazioni a un documento è l’organizzazione a cascata.
L’organizzazione a cascata permette di definire nel caso vi siano due o più regole in conflitto applicate allo stesso elemento, quale debba avere la precedenza, o meglio un maggiore peso.
Vediamo un esempio pratico nel seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
h1 {color: green;} /* applico ad h1 il colore verde */
h1 {color: red;} /* applico ad h1 il colore rosso */
</style>
</head>
<body>
<h1>Il contenuto del documento</h1>
</body>
</html>
Nel caso sopra descritto assegnamo alla stessa proprietà – color – valori differenti, generando un conflitto. h1 non può essere allo stesso tempo verde e rosso! Chi vincerà?
Per determinare quali sono le dichiarazioni che saranno applicate in caso di conflitto vi sono regole ben definite, ottenute in base all’ereditarietà, al tipo di selettore applicato e all’ordine in cui compaiono le dichiarazioni. CSS segue le seguenti regole:
1. Trovare tutte le dichiarazioni di un elemento, ad esempio agganciandoci all’esempio sopra CSS rileva che per l’elemnto HTML h1 si presentano due dichiarazioni color: green e color: red.
2. Selezionare la priorità delle dichiarazioni in base al loro peso specifico e all’origine; ad esempio le regole marcate con – !important – hanno la precedenza su tutte le altre.
3. Selezionare le dichiarazioni in base alla specificità degli elementi. Più un elemento è specifico. maggiore è il suo peso.
4. Selezionare le dichiarazioni in base al loro ordine. Più tardi appare una dichiarazione, maggiore è il suo peso. Le dichiarazioni di un foglio di stile importato ha la precedenza sulle dichiarazioni interne al foglio in caso di conflitto.
Riprendendo il caso sopra descritto – h1: color green – e – h1:color red – vediamo come ragiona CSS:
1. Rileva la presenza di 2 dichiarazioni in conflitto perchè assegnate al medesimo elemento h1
2. Il peso specifico delle dichiarazioni è lo stesso.
3. La specificità dell’elemento è la stessa
4. L’ultima dichiarazione applicata è – h1:color red -, quindi ha la priorità su – h1:color green -. Conclusione: il testo sarà rosso, vince – h1:color red -.
Analizziamo per esteso la procedura. Essendo questo un corso base ometterò volutamente alcune eccezzioni che invito il lettore ad approfondire una volta che avrà preso maggiore confidenza con il CSS.
1. TROVARE TUTTE LE DICHIARAZIONI IN CONFLITTO
Non c’è molto da dire il lavoro è tutto del motore di rendering del CSS!
2. SELEZIONARE PER PESO E ORIGINE
Le regole marcate – !important – hanno la precedenza, ad esempio:
<style type="text/css">
h1 {color: green; !important} /* regola importante, ha la precedenza */
h1 {color: red;}
</style>
Le regole che hanno origine nel foglio di stile dell’autore hanno la precedenza su quelle che hanno origine dal foglio di stile del lettore, ad esempio:
h1 {color: green;} /* foglio di stile dell'autore, ha la precedenza su quella del lettore */
h1 {color: red;} /* foglio di stile del lettore */
3. SELEZIONE PER SPECIFICITA’
Le regole più specifiche hanno la precedenza ad esempio:
h1#green {color: green;} /* dichiarazione più specifica, con selettore ID */
h1 {color: red;} /* dichiarazione meno specifica */
4. SELEZIONE PER ORDINE
Le regole dichiarate più tardi hanno la precedenza, leggendo dall’alto verso il basso, ad esempio:
h1 {color: green;} /* prima dichiarazione */
h1 {color: red;} /* seconda dichiarazione, arriva più tardi, ha la precedenza */
Il W3C che definisce gli standard del web ha rilasciato le seguenti specifiche per il calcolo del peso delle dichiarazioni:
– Selettore ID, peso= 100
– Selettore di classe, peso= 10
– Selettore di attributo, peso= 10
– Pseudoclasse (tranne :not), peso= 10
– Selettore di tipo, peso= 1
– Pseudoelemento, peso= 1
– Selettore universale, peso=0
Alcuni esempi di calcolo:
Data la rappresentazione:
Regola -> dichiarazioni a peso 100 + dichiarazioni a peso 10 + dichiarazioni a peso 1
* -> 0x100 + 0x10 + 0x1 = 0
p -> 0x100 + 0x10 + 1×1 = 1
div p -> 0x100 + 0x10 + 2×1 = 2
div p h1 -> 0x100 + 0x10 + 3×1 = 3
.classe -> 0x100 + 1×10 + 0x1 = 10
p.classe -> 0x100 + 1×10 + 1×1 = 11
#mio ID -> 1×100 + 0x10 + 0x1 = 100
