A che cosa serve il CSS

Un solo file CSS può cambiare lo stile di tutte le pagine di un sito in un colpo. Era questo l'argomento principale a favore del CSS quando il W3C pubblicò il CSS livello 1 nel dicembre 1996.

Struttura in HTML, aspetto in CSS

L'HTML dice che cosa è ogni parte di una pagina: un titolo, un elenco, un modulo. Il CSS, sigla di Cascading Style Sheets (fogli di stile a cascata), dice come devono apparire quelle parti: colori, caratteri, dimensioni, spaziature e posizione sullo schermo. Tenere separate le due cose ha vantaggi pratici. Puoi cambiare l'aspetto di un intero sito modificando un solo foglio di stile, lo stesso HTML può apparire in modo diverso su un telefono, su un grande monitor e su carta, e chi legge può applicare stili propri, come un testo più grande, senza rompere la pagina.

Håkon Wium Lie cominciò a lavorare al CSS al CERN nell'ottobre 1994, Bert Bos si unì al lavoro nel 1995 e il 17 dicembre 1996 il W3C pubblicò il CSS livello 1 come Raccomandazione. Il CSS 2 seguì nel maggio 1998. Da allora il CSS è diviso in moduli, come Color, Selectors, Flexbox e Grid, ognuno sviluppato con i propri tempi dal CSS Working Group del W3C. Non esiste un unico CSS4: il gruppo di lavoro pubblica un'istantanea che elenca quali moduli sono stabili.

La forma di una regola

Un foglio di stile è un elenco di regole. Ogni regola comincia con un selettore, che dice a quali elementi si applica, seguito da un blocco di dichiarazioni tra parentesi graffe. Dentro il blocco ogni dichiarazione è una proprietà, due punti, un valore e un punto e virgola. Nella regola qui sopra h1 seleziona tutti i titoli di primo livello, e le due dichiarazioni li rendono blu e alti 32 pixel. Spazi e a capo dentro una regola non contano, quindi quasi tutti mettono ogni dichiarazione su una riga a parte per renderla leggibile.

Quando il browser incontra una dichiarazione che non capisce, come una proprietà scritta male o un valore senza senso, salta quella sola dichiarazione e passa alla successiva. È una scelta voluta: così si possono aggiungere nuove funzioni CSS senza rompere i browser più vecchi. Il rovescio della medaglia è che un solo punto e virgola mancante può far sparire in silenzio la dichiarazione successiva, perché le due si fondono in un'unica dichiarazione non valida. Se uno stile non si applica, controlla prima la punteggiatura. I commenti si scrivono /* così */.

Tre modi per aggiungere il CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Un foglio di stile esterno, collegato dalla <head> con <link rel="stylesheet">, è la scelta abituale per un sito vero: tutte le pagine lo condividono e il browser lo scarica una volta sola e lo tiene nella cache. Un elemento <style> contiene le regole di una sola pagina, ed è quello che usano gli esercizi di questo corso. L'attributo style applica dichiarazioni a un singolo elemento: è comodo per una prova veloce ma difficile da mantenere, perché lo stesso aspetto va ripetuto su ogni elemento.

Il browser ha già degli stili

Anche una pagina senza CSS ha un po' di stile: i titoli sono grandi e in grassetto, i link sono blu e sottolineati, gli elenchi sono rientrati. Questi stili vengono dal foglio di stile predefinito del browser, chiamato foglio di stile dello user agent. Le tue regole si applicano sopra di esso. Per questo la pagina della panetteria del corso di HTML era leggibile prima di avere del CSS, e per questo un buon foglio di stile cambia solo ciò che serve.