Cosa significa il termine 'cascata' in CSS?

La cascata in CSS determina quale stile in conflitto deve essere applicato a un elemento. Si basa su tre criteri principali:

1. Importanza: Gli stili con !important hanno la priorità più alta.
2. Specificità: I selettori più specifici sovrascrivono quelli meno specifici. La specificità si calcola in base al numero di ID, classi/pseudo-classi/selettori di attributo e tag/pseudo-elementi nel selettore.
3. Ordine nel codice sorgente: In caso di uguale importanza e specificità, si applica la regola dichiarata per ultima.

Oltre a questi tre, vengono considerati altri fattori:

• Origine dello stile: Stili dell'utente (nelle impostazioni del browser), stili dell'autore (stili esterni e interni, stili inline), stili di default del browser.
• Eredità: Alcune proprietà vengono ereditate dagli elementi genitori ai figli.

Esempio di specificità:

/* Specificità: 0-1-0 */
.mia-classe {
  colore: blu;
}

/* Specificità: 1-0-0 */
#mio-id {
  colore: rosso;
}

In questo caso, l'elemento con id mio-id e classe mia-classe avrà il testo di colore rosso, poiché l'ID #mio-id ha una specificità più alta rispetto a .mia-classe.