Come già detto nelle precedenti guide, CSS sta per Cascading Style Sheet che, tradotto, sta per foglio di stile a cascata.
Questo concetto deve esserti particolarmente chiaro, in quanto propedeutico all’apprendimento di ciò di cui parleremo in questa guida.
La caratteristica principale di un foglio di stile è l’ordine in cui i selettori assegnano le regole css a un determinato elemento html.
Ciò significa che, se su un elemento vengono assegnate due proprietà identiche – da due selettori con la stessa “potenza” – ma con valori diversi, verrà interpretato l’ultimo valore inserito.
Facciamo subito un esempio per rendere più chiaro quanto appena detto:
p {
color : green;
}
p {
color : red;
}
Come vedi, in questo caso, nel nostro foglio CSS avremo due selettori che selezionano tutti i tag <p> della pagina HTML. Cosa succederà? Semplice: tutti i tag p verranno colorati di rosso, in quanto la seconda regola andrà a sovrascrivere la prima.
Succederebbe la stessa cosa se le due proprietà fossero assegnate nella stessa regola:
p {
color : green;
color : red;
}
Oltre questa regola di base, però, c’è qualcos’ altro che stabilisce la precedenza di una regola rispetto all’altra nel nostro foglio di stile: stiamo parlando della specificità dei selettori, che andremo ad analizzare a breve, introdotto un altro piccolo concetto utile allo scopo, ovvero quello dell’ereditarietà.
Ereditarietà
Un’altra caratteristica importante del CSS è l’ereditarietà delle proprietà.
Proviamo a concepire la nostra pagina html come una sorta di albero genealogico: ogni elemento, quindi, ha un genitore dal quale può ereditare una determinata proprietà.
Facciamo un piccolo esempio.
La struttura html:
<header> <h1>Diventa sviluppatore web</h1> <h2>CORSO DI CODING</h2> <a href=”https://aulab.it/calendly">Prenota un appuntamento</a> </header>
il codice CSS:
header {
color : #333333;
font-size : 24px;
}
Nell’esempio soprastante i tag <h1>, <h2> e <a> avranno una grandezza di 24px, mentre solo i tag <h1> e <h2> cambieranno il proprio colore.
Questo avviene perché questi tag erediteranno il colore e la dimensione dal proprio padre.
Perché, allora, il tag anchor non cambia colore?
Perché il tag anchor, così come altri tag all’interno del browser (come ad esempio <button> o <input>), presenta dello stile di default che non verrà mai sovrascritto da uno ereditato.
Per sovrasciverne lo stile ci occorrerà assegnargliene uno con delle regole espresse attraverso un selettore che avrà un’azione più forte dell’ereditarietà: un selettore più specifico.
Specificità
Cos’è, quindi, la tanto decantata specificità?
La specificità è il valore che permette di definire la priorità di una regola CSS rispetto ad un’altra.
Negli esempi visti finora, è facile calcolare la dimensione del testo o determinare il colore di un paragrafo, perché abbiamo riportato volutamente degli esempi molto semplici ai fini di una migliore comprensione del concetto di base.
In realtà, tuttavia, la situazione comincia ad essere abbastanza diversa quando i fogli di stile iniziano a diventare piuttosto grandi e determinare la specificità delle regole CSS può diventare molto complicato.
Ad esempio, potremmo trovarci in una situazione in cui le regole si sovrappongono e non riusciamo a cambiare alcune proprietà. Per superare questo problema, il linguaggio CSS fornisce un modo molto semplice per determinare quale proprietà avrà la priorità.
La proprietà con il valore di specificità più alto avrà la precedenza sulle altre proprietà; se due o più regole hanno lo stesso valore di specificità, l’assegnazione seguirà il principio della cascata.
Il valore di specificità di una regola CSS può essere rappresentato da un numero di quattro cifre. In questo sistema numerico, l’importanza dei numeri è ordinata da sinistra a destra, quindi valori più alti indicano una maggiore specificità.
Per ogni tipo di selettore avremo un valore di specificità diverso.
Immaginiamo le nostre 4 cifre :
|0|0|0|0|
- Gli elementi e gli pseudo-elementi aggiungeranno 1 alla cifra 4 -> |0|0|0|1|
- Classi , attributi e pseudo-classi aggiungeranno 1 alla cifra 3 -> |0|0|1|0|
- Gli ID aggiungeranno 1 alla cifra 2 -> |0|1|0|0|
- Lo style inline aggiungerà 1 alla cifra 1 -> |1|0|0|0|
Vediamo alcuni esempi
p {} /* 0|0|0|1 */
p span {} /* 0|0|0|2 */
p.text-red {} /* 0|0|1|1 */
p.text-red#subtitle {} /* 0|1|1|1 */
#menu {} /* 0|1|0|0 */
style="color:red;" /* 1|0|0|0 */
L’ultimo esempio, che utilizza l’attributo style, ha la precedenza su tutti gli altri esempi.
Ma ricorda! Lo style inline è sempre sconsigliato.
Esiste, infine, un’ultima keyword CSS che sovrascrive tutte le precedenti, ovvero !important
Scrivendo questa keyword alla fine di una proprietà CSS questa avrà la priorità su tutte quelle dichiarate, anche se ci sono dei selettori con specificità maggiore.
Facciamo un esempio:
/*nell' HTML*/ <p style=”color: red;”>Ciao a tutti</p>
/*nel CSS*/
p {
color : green !important;
}
In questo modo, anche se il selettore per elemento p ha una specificità minore rispetto allo style inline, grazie alla keyword !important il tag <p> avrà colore verde.
Ti sconsigliamo, tuttavia, di utilizzare questa keyword perchè, a lungo andare, in un progetto molto grande potrebbe darti numerosi problemi e sovrascrivere molte classi, rendendo difficile modificare lo stile di alcuni elementi.
