CSS è l’acronimo di Cascading Style Sheets: si tratta, in sostanza, di un linguaggio che in ambito informatico viene impiegato per definire la formattazione di documenti XML, XHTML e HTML.
I fogli di stile a cascata non sono altro che un linguaggio di stile per i documenti web, dunque, e istruiscono i browser sulle modalità di presentazione di un documento: definiscono le immagini di sfondo, i colori, il layout, i font, il posizionamento dei vari elementi sulla pagina, e così via.
Una funzione molto utile dei CSS è che possono essere applicati unicamente sui media (laptop, desktop, sintetizzatori vocali, televisori, proiezioni, PDA, stampanti, smartphone, telescriventi, browser braille, eccetera) che vengono decisi dall’autore.
Si può sostenere che i CSS rappresentino, in un certo senso, il complemento ideale rispetto all’HTML, nel senso che quest’ultimo è un linguaggio strutturale, che ha – o che comunque dovrebbe avere – poco a che fare con la presentazione di un documento, mentre i CSS servono proprio ad arricchire e a completare la dimensione visiva di una pagina. In un’ottica in cui il contenuto deve essere separato dalla presentazione, quindi, ecco i fogli di stile, che possono essere considerati anche come degli insiemi di regole.
Una regola CSS ha, in genere, una struttura tipica che è costituita da due blocchi principali, vale a dire il blocco delle dichiarazioni e il selettore: quest’ultimo ha lo scopo di indicare e di definire la parte del documento alla quale la regola sarà applicata.
I selettori sono differenti e variano a seconda delle necessità.
Per quel che riguarda il blocco delle dichiarazioni, è delimitato da una parentesi graffa di apertura e da una parentesi graffa di chiusura rispetto al selettore e a tutte le altre regole. Non è detto che al suo interno vi sia una dichiarazione sola, anzi. Ogni dichiarazione è formata dalla proprietà e dal valore, che sono separate dai due punti (mentre il punto e virgola separa le dichiarazioni e va messo dopo l’ultima dichiarazione del blocco): attraverso la proprietà viene definito un aspetto particolare del selettore che deve essere modificato, come per esempio larghezza, colore di sfondo, margini…
Occorre ricordare sia che gli spazi bianchi in una regola non influiscono in alcun modo sul risultato, e anzi di solito vengono raccomandati così da garantire una leggibilità migliore, sia che per ciascuna dichiarazione si può indicare solo una proprietà, mentre i valori possibili sono molteplici. Le proprietà si distinguono in singole e a sintassi abbreviata: le prime, che sono la quasi totalità, permettono di impostare un singolo aspetto per un certo selettore, quale – per esempio – il font che deve essere utilizzato, la dimensione del testo, e così via. Le proprietà a sintassi abbreviata, note anche come shorthand properties, consentono di definire, invece, un insieme di proprietà con una dichiarazione sola.
Tra le proprietà più usate per i CSS vale la pena di citare text-align, che definisce l’allineamento del testo e degli altri elementi, e color, che definisce il colore del testo di un elemento (ma non quello dello sfondo che è definitio dalla proprietà background). La proprietà font, invece, definisce le proprietà del carattere, e costituisce una scorciatoia per font-weight, per font-size e per font-family. Ancora, le proprietà margin e padding servono a definire lo spazio che circonda gli elementi: in particolare margin definisce lo spazio al di fuori dei bordi, mentre padding definisce lo spazio all’interno degli stessi.
