CSS è descritto in maniera completa in CSS Specification. Qui sono trattate nei dettagli tutte le sue caratteristiche e funzionalità, sia dal punto di vista degli autori dei documenti che lo utilizzano, che degli implementatori dei programmi di restituzione, tipicamente i browsers. Date queste sua destinazioni, la specifica non ha finalità didattiche e non è consigliabile per questo utilizzo.
Per imparare ad utilizzare il linguaggio sono disponibili molte risorse in libri e siti web. Alcune gratuite. Una veloce introduzione a CSS si può trovare in w3schools CSS TUTORIAL.
Normalmente un linguaggio si apprende cominciando ad utilizzarne i costrutti base in applicazioni elementari e poi in programmi di complessità via via crescente. Questo con CSS è particolarmente agevole. Scrivere una regola di stile è semplicissimo così come verificarne l'effetto. La tentazione di andare avanti per tentativi è forte, perchè, "smanettando" un pò si trova quasi sempre una soluzione accettabile. E, se non ci si riesce autonomamente, si può sempre trovare un esempio da copiare. Il risultato paradossale è che, dal momento che il linguaggio è semplice, non lo si impara mai veramente bene. Non è una situazione accettabile. Il linguaggio va studiato. Libri, manuali, siti web non mancano di certo, ma chi imparerà a leggere la specifica avrà il vantaggio di poter accedere alla risorsa più aggiornata ed autorevole.
Questa è una guida per "muoversi" all'interno della specifica, ma è anche una sintesi delle nozioni e dei concetti fondamentali da acquisire per utilizzare al meglio questo fondamentale strumento.
CSS è un linguaggio per la definizione della formattazione, sui diversi tipi di media, di documenti html, xml, xhtml. Prendendo come riferimento una pagina web; con html se ne definisce il contenuto: testo, link ad altri documenti, immagini, filmati, brani audio; con CSS se ne definisce l'aspetto quando rappresentata sul display di un PC, di uno smartphone, o stampata su un foglio di carta. CSS consente di definire la disposizione delle diverse sezioni di testo, lo spazio occupato, la dimensione delle immagini, che tipo di font utilizzare per i caratteri, quali colori usare, se saranno presenti o meno bordi o sfondi, motivi grafici e così via. In totale l'ultima versione di CSS, CSS 3, consente di definire circa 350 proprietà di stile. Se si considera che la prima versione di CSS comprendeva solo una cinquantina di proprietà è prevedibile che in futuro il loro numero continuerà a crescere.
Esempio di definizione di una regola di stile.
h1{
font-size: 2em;
font-weight:bolder;
margin: .67em 0;
}
Le idee alla base di CSS sono quelle di rendere i documenti indipendenti dai dispositivi di presentazione e dal loro software, di facilitarne manutenibilità e riusabilità, di favorire l'implementazione di funzioni rivolte agli utenti con disabilità.
Le proprietà di stile si applicano agli elementi dei documenti. Fra di essi esistono relazioni di parentela. Ad esempio, in un documento html, tutti gli elementi visualizzabili sono contenuti nell'elemento body che pertanto è l'antenato comune a tutti gli altri. CSS sfrutta questi tipi di relazione consentendo l'ereditarietà di alcune proprietà.
Il nome "Cascading Syle Sheets" rivela un importante meccanismo di funzionamento di CSS: quello dell'applicazione, agli elementi dei documenti, di una sequenza di regole di stile, provenienti da fonti diverse: il programma di restituzione o User Agent (ad esempio un browser), l'autore del documento o Author, il fruitore del documento o User.
Browser, autore, utente possono applicare ad un stessa proprietà di stile, uno di seguito all'altro (in cascata), valori differenti. Prevarrà l'ultimo valore applicato. CSS stabilisce che l'ordine di applicazione delle dichiarazioni delle proprietà sia il seguente:
Questo meccanismo di cascata, insieme all'ereditarietà , e al fatto che, per tutte le possibili proprietà, i progettisti di CSS
abbiano stabilito un valore iniziale di default, fa si che tutti gli elementi presenti nei documenti siano sempre
rappresentabili in una forma dignitosamente fruibile. L'ereditarietà si applica dopo la cascata con priorità agli ascendenti più prossimi e
l'assegnazione dei valori alle proprietà è fatto mediante una successione ordinata di step che tiene conto, in aggiunta a cascata ed ereditarietà,
dei vincoli imposti dal media di restituzione.
Questo documento,contiene un numero minimo di dichiarazione di stile dell'autore, eppure viene visualizzato
sullo schermo di un desktop o di uno ephone in modo abbastanza ordinato e può anche essere stampato
senza problemi. I caratteri sono dimensionati in modo da essere leggibili sia a video che su carta,
le linee di testo sono adeguatamente distanziate e le righe di intestazione sono appropriatamente evidenziate.
Dal punto di vista dell'autore, la cascata di stili di cui tener conto è la seguente
Che nella maggior parte dei casi può ridursi a:
Prima mi iniziare a scrivere nuove regole di stile vediamo come alcuni oggetti sono restituiti usando solo le impostazioni dello User Agent. Prova degli stili di default e successivamente applicando alcune regole di stile dell'autore Prova stili autore.
Tutti i fogli di stile, indipendentemente dalla loro origine, sono formati da una sequenza di statement. Ci sono due tipi di statement: gli statement di tipo rule-set che impostano il valore delle proprietà degli elementi che compongono il documento e gli statement di tipo act-rule che agiscono in qualche modo sull'interprete CSS stesso.
Sono di gran lunga gli statement più comuni che compaiono in un foglio di stile. Servono per impostare i valori delle proprietà di un elemento. La loro sintassi è la seguente:
selettore {
proprietà p1: valore delle proprietà p1;
proprietà p2: valore della proprietà p2;
...
proprietà pn: valore della proprietà pn;
}
Dove selettore individua gli elementi del documento a cui applicare la regole di stile.
selettore può essere:
Lo statement:
s1, s2, ...sN{
prop 1:val 1;
...
prop N:val N;
}
Definisce lo stesso blocco di propietà per gli elementi individuati dai selettori s1, s2, ... nN
Sui selettori "semplici", sino ad ora presentati, sono state stabilite relazioni che generano nuovi selettori i quali individuano sottoinsiemi degli elementi dei selettori di partenza.
Una trattazione completa dei selettori viene fornita dalla sezione Selector delle specifiche di CSS.
L'elenco completo di tutte le proprietà attualmente disponibili è riportato nella seguente tabella: Full property table che, per ogni proprietà, fornisce: i possibili valori, il valore iniziale, gli elementi a cui è applicabile, informazioni sull'ereditarietà e il gruppo di media a cui è applicabile.
Le più importanti act-rule sono:
@import "mioCss.css"; è un esempio di at-rule. La sua funzione è quella di importare all'interno del foglio le regole contenute nel file mioCss.css. Esistono diversi tipi di atc-rules che vedremo più in dettaglio nel seguito.
@media specifica il tipo di media target per un set di statement.
La sua sintassi è la seguente:
@media:media type{
selettore x {
prop x1:val x1;
...
prop xN:val xN;
}
...
selettore xn {
prop k1:val k1;
...
prop kN:val kN;
}
}
@page ha a che fare con i media di tipo page. Possono servire in fase di stampa di un documento per forzare il salto a pagina nuova o per differenziare le pagini pari da quelle dispari. I media di tipo page tuttavia non hanno a che fare solo con la stampa. Anche documenti presentati a video possono essere paginati.
Una delle caratteristiche più importanti di CSS è quella di consentire di specificare l'aspetto che dovrà avere un documento quando restituito si diversi tipi di media: schermo di un computer, pagina di stampa, dispositivo braille, sintetizzatore vocale, etc etc.
Abbiamo già visto l'act rule @media che consente di specificare il tipo di media di un blocco di dichiarazioni. I tipi di media più comuni utilizzati come selettore di @media sono print e screen ma ne esistono altri. L'elenco completo è in Recognized media types
Dal punto di vista della restituzione alcuni media types hanno caratteristiche simili, così possono essere raggruppati in media groups.
Ogni propriety CSS si applica a uno o più media groups come specificato nella definizione della property stessa. O in Full property table
Il modello a box è descritto nella sezione delle specifiche Box model.
Le cose da ricordare sono:
Due definizioni:
canvas è lo spazio dove gli elementi formattati sono posizionati. Le sue dimensioni sono teoricamente infinite. In generale viene restituito in viste o porzioni parziali in funzione del media utilizzato.
viewport è la finestra messa a disposizione dal programma di restituzione per la visualizzazione degli elementi disposti sul canvas. Normalmente è una finestra sullo schermo che può essere spostata sul canvas mediante il meccanismo di scroll.
Abbiamo già visto che gli elementi del documento sono contenuti in box rettangolari. Alcuni box fungono da contenitori di altri elementi e la modalità con cui i discendenti sono disposti nel contenitore padre dipende dalle proprieties display, position, left, top, right, bottom, float di quest'ultimo.
La proprietà display governa il modo in cui i box dei diversi elementi si dispongono all'interno del proprio container.
La property display può assumere diversi valori. Ecco i valori di default per gli elementi più comunemente usati:
Una elenco completo dei possibili valori delle property display è presentato in: https://developer.mozilla.org/en-US/docs/Web/CSS/display
Le sezioni che descrivono i tipo di box e i relativi comportamenti nel modello visuale sono, a mio parere, le
parti della specifica più difficili da leggere e da comprendere, in quanto trattano in profondità aspetti che riguardano più l'implementatore
degli User Agent che l'utilizzatore del linguaggio. Inoltre la sintassi di CSS permette di assegnare valori a property, che
se usate in modo inappropriato al contesto di formattazione possono determinare effetti visuali negativi.
Per questa ragione farò una sintesi che, pur non comprendendo tutte le possibili sfaccettature dell'argomento, ne illustri i concetti
fondamentali.
I box di tipo block sono generati per elementi che hanno, per default, property display:block. Comprendono:
In un contesto di formattazione "normale", ovvero in assenza di posizionamento assoluto o di blocchi flottanti, i box di questo tipo:
Questo è quello che è chiamato contesto di formattazione a blocchi.
I box di tipo inline sono generati per elementi che hanno, per default, property display:inline
Comprendono:
In un contesto di formattazione normale, quando in un contenitore non sono presenti box di tipo block, i box di questo tipo:
Questo è quello che è chiamato contesto di formattazione inline.
Leggendo la parte della specifica relativa a questo argomento si capisce come il testo all'interno di un paragrafo sia trattato come un elemento anonimo di tipo inline che genera una o più line-box. L'elemento paragrafo non è altro che un contenitore dove il testo stesso, e gli altri elementi a livello di linea presenti al suo interno danno origine ad un contesto di formattazione inline.
Ecco un paragrafo contenente diversi elementi a livello di linea. Un elemento em un elemento strong
un elemento mark. Vediamo come il contenuto occupi più line box disposte verticalmente. Vediamo cosa succede quando
iserisco un immagine: 
. Questo mostra come vengano
generate più line-box con altezze differenti ma sempre sufficientemente alte per l'oggetto più alto. Infatti ecco cosa succede quando inserisco un
immagine più bassa 
Oltre che dalla property display, il modo in cui gli elementi vengono posizionati, gli uni rispetto agli altri, in un contenitore, dipende dalle proprietà position e float, nonchè dalle proprietà left, top, right e bottom che determinano spostamenti dell'elemento rispettivamente a destra, in basso, a sinistra, in alto, rispetto alla posizione normale.
La property positionpuò assumere i seguenti valori:
La property float specifica se un box deve galleggiare a sinistra, destra o non gallaggiare. Può essere applicato a tutti gli elementi che non sono posizionati in maniera assoluta.
La property float può assumere i seguenti valori:
In CSS i box generati per la presentazione degli elementi giaciono su piani stratificati paralleli al piano dello schermo. Pertanto la loro posizione è individuata da tre coordinate: orizzontale e verticale sul piano di giacenza ed una terza coordinata intera, z-index, che individua il piano stesso.
Lo strato più superficiale è quello con la coordinata z-index più grande, lo strato più profondo è quello con la coordinata z-index minore. z-index può assumere anche valori negativi.
Nella pagina esempio di posizionamento fisso si può vedere la property z-index in azione.