Webmaking 101 ∞ Introduzione ai CSS

Il sabato è tempo di #Webmaking101 su Word in Progress! 
Oggi la rubrica ospita un guest post di Joshi Spawnbrød che ci spiega cosa sono i CSS*. 

Una volta stabilito che il linguaggio HTML descrive la semantica di un documento, ovvero cosa rappresenta il testo che stiamo leggendo, abbiamo ancora bisogno di indicazioni su come visualizzarlo. Ecco che ci vengono incontro i CSS: una specie di vestito da far indossare al nostro markup.
L'uso dei CSS serve a compilare in un documento le informazioni grafiche, come il colore, il carattere (font), la dimensione del testo ecc., che daranno il taglio grafico desiderato. Tramite l'uso dei CSS è possibile avere più versioni grafiche dello stesso documento senza alterare il markup o il contenuto originario, oltre ad aumentare la leggibilità dei contenuti stessi.
Grazie alla loro flessibilità e facilità d'impiego, i CSS sono diventati una caratteristica centrale per fornire prodotti web di qualità, facilmente utilizzabili e fruibili da più browser e dispositivi.
Le funzionalità più avanzate del linguaggio di stile permettono la creazione di interfacce altamente funzionali e chiare per l'utente finale, senza dover necessariamente coinvolgere del linguaggio attivo come Javascript.
Per poter affrontare i CSS è necessario avere dimestichezza con il linguaggio HTML e con le proprietà grafiche delle singole tag.

Cos'è, in pratica, un CSS?
Entriamo un attimo nel dettaglio e vediamo a livello base com'è strutturato un CSS: è sufficiente un file di testo semplice per poter iniziare a lavorare. Dentro al file sono presenti delle definizioni scritte nel linguaggio di stile.

body { background-color:#d0e4fe; }
h1 { color:orange; text-align:center; }
p { font-family:"Times New Roman"; font-size:20px; }

Le tre righe che vedete qui sopra sono un CSS valido, che, se applicato su una pagina HTML, farà sì che il nostro sfondo abbia colore celeste (#d0e4fe), il titolo della pagina sia in colore arancio, e venga impiegato il "Times New Roman" come font per i paragrafi.
Dobbiamo includerlo con un tag preciso:  

‹link rel="stylesheet" type="text/css" href="esempio.css›

Oppure possiamo scrivere il nostro stile direttamente nel documento HTML, usando il tag style. Questa seconda soluzione ha lo svantaggio che i file  per markup e stile non sono separati, ma in alcuni casi potrebbe risultare utile, quando ad esempio non possiamo gestire più di un file.

Com'è strutturato il contenuto in un CSS?
Il contenuto è strutturato secondo questa regola:

selettore {proprietà 1: valore;}

Il selettore è la parte che identifica cosa stiamo graficizzando, che guadagnerà le proprietà scritte tra parentesi graffe. In genere si possono usare tre tipi di selettori: i Tag, le Classi e gli Identificativi. Possiamo riconoscerli grazie alla sintassi con cui vengono scritti. Questa parte è fondamentale per capire come funzionano i css, quindi è opportuno affrontarla subito.

Selettori per Identificativo
Gli id sono riconoscibili perché iniziano con il simbolo del cancelletto = #.

‹p id="mio"›
il mio testo
‹/p›

Nel nostro CSS potremo quindi scrivere: #mio { color:red; } e fare in modo che il testo appaia colorato in rosso. Gli id sono molto accurati, ma hanno una controindicazione: è possibile definirli un'unica volta nel documento. Non potremo avere due tag con lo stesso id="..." come proprietà.

Selettori per Classi
Le classi sono riconoscibili in quanto iniziano con un punto. Anche la classe può essere assegnata ad un tag, in questo modo: 

‹p class="grassetto corsivo"›
questo testo apparirà in grassetto e anche in corsivo
‹/p›

Le classi sono molto più versatili degli id, in quanto possono essere applicate a qualunque elemento e in qualsiasi numero.Questo significa che un tag con due classi cercherà di sommare le definizione di entrambe. Nel documento CSS definiremo le classi in questo modo: 

.grassetto {font-weight: bold;}
.corsivo {font-style: italic;}

Attenzione! Le classi nel css vengono scritte con il punto davanti, mentre nel documento di markup HTML devono essere gestite come nomi semplici, separati da spazi.

Seletori per Tag
L'ultimo sistema di selettore usa i nomi delle tag HTML, ad esempio 'body', per poter dare una proprietà grafica a tutti i tag dello stesso tipo.

p {color: red;}

Ogni paragrafo del documento presenterà il testo in colore rosso.

Uso dei selettori
Una delle proprietà speciali dei CSS è che vengono interpretati in sequenza (da questo la prima C nell'acronimo: "Cascading"), ovvero le ultime definizioni sono quelle che comandano.
Per questo si tende, in generale, a scrivere le definizioni più generiche in testa al documento CSS, usando le tag o delle classi di uso comune in tutto il documento HTML. Si scende poi nel dettaglio con classi ed id via via che servono regole più specifiche. Prendiamo questo esempio per capire cosa significa:

p {color: black; font-family: verdana; sans-serif;}
.glass {opacity: 50%;}
p {color: green;}

La prima definizione di stile per il tag "p" indica il testo come nero, ma nell'ultima riga viene definito di nuovo il verde come colore del testo. In questo caso la prima regola di colore non verrà applicata, ma la regola per la famiglia del font sarà comunque attiva! Questa proprietà dei CSS ci viene incontro quando combiniamo i selettori per avere dei sottotipi di oggetti grafici.

p {color: black; font-family: verdana; sans-serif;}
.glass {opacity: 50%;}
p .chiusura {color: green;}

Adesso tutti i paragrafi del documento HTML saranno colorati di nero, fatta eccezione per quelli con classe "chiusura", questo grazie all'ultima riga delle definizioni, che indica "solo il tag con classe .chiusura ".

Note

• * CSS sta per Cascade Style Sheet, Foglio di Stile a Cascata.
• Al testo è stato applicato un editing minimo per riordinarlo dal punto di vista della formattazione. 
• Gli esempi sono stati creati con Mozilla Thimble.