Che cos’è il CSS e perché serve
CSS (Cascading Style Sheets) è il linguaggio che definisce l’aspetto di una pagina HTML: colori, font, spaziatura, layout. Se l’HTML è lo scheletro di una pagina, il CSS è tutto ciò che la rende presentabile — separare i due linguaggi rende il codice più pulito e permette di cambiare lo stile di un intero sito da un unico punto.
I tre modi per collegare il CSS
1. Inline — direttamente sull’elemento, con l’attributo style. Da evitare se non per test rapidi: mischia contenuto e stile, ed è difficile da mantenere.
<p style="color: red;">Testo rosso</p>
2. Interno — dentro il tag <style>, nel <head> del documento.
<style>
p {
color: red;
}
</style>
3. Esterno — un file .css separato, collegato con <link>. È il metodo consigliato: separa completamente struttura e stile, e il browser mette il file in cache velocizzando le visite successive.
<link rel="stylesheet" href="style.css">
Sintassi di base e selettori semplici
Una regola CSS è composta da un selettore (a cosa si applica) e una o più dichiarazioni (proprietà: valore) tra parentesi graffe:
p {
color: red;
font-size: 16px;
}
Selettore per tipo: il nome del tag, seleziona tutti gli elementi di quel tipo.
h1 { color: navy; }
Selettore per classe: il punto seguito dal nome della classe, riutilizzabile su più elementi.
.evidenziato { background-color: yellow; }
<p class="evidenziato">Questo paragrafo è evidenziato.</p>
Selettore per ID: il cancelletto seguito dal nome dell’ID, punta a un solo elemento univoco.
#titolo-principale { font-size: 32px; }
Cascata e specificità: chi vince quando due regole si scontrano?
Il nome “Cascading” non è casuale: quando più regole CSS puntano allo stesso elemento, il browser deve decidere quale applicare. La scelta dipende da tre fattori, in ordine di importanza:
1. Specificità del selettore — più un selettore è “specifico”, più vince:
- ID (
#titolo) → specificità più alta - Classe (
.evidenziato), attributo, pseudo-classe → specificità media - Tipo di elemento (
p,h1) → specificità più bassa
p { color: blue; } /* specificità bassa */
.evidenziato { color: red; } /* specificità media: vince questa */
2. Ordine nel foglio di stile — a parità di specificità, vince la regola scritta dopo.
3. !important — forza una dichiarazione a vincere su qualsiasi altra, ignorando la specificità. Da usare con grande parsimonia: è comodo per un’emergenza, ma rende il codice più difficile da mantenere, perché “spezza” la logica normale della cascata.
p { color: red !important; }
Capire questo meccanismo ti eviterà la frustrazione più comune di chi inizia con il CSS: “perché il mio stile non si applica?”.
Esercitazione pratica
Collega un foglio di stile esterno a una delle pagine HTML già create. Applica uno stile diverso allo stesso elemento con selettore per tipo, poi per classe: verifica quale vince e perché.