I Cascading Style Sheets (fogli di stile in castata) costituiscono lo strumento più importante per gestire gli attributi tipografici di un sito moderno. Sebbene esistano fin al 1996, hanno trovato la loro diffusione naturale con HTML 4.0 e il loro pieno sviluppo con HTML 4.01, che ne recepisce appieno le caratteristiche.
Offrono numerosi vantaggi: controllare l'aspetto del testo e degli altri elementi della pagina con una precisione molto superiore a quella possibile mediante i tag fisici di HTML, raggruppare tutte le informazioni stilistiche di un sito all'interno di un documento che venga caricato una sola volta per quel particolare sito, alleggerendo le singole pagine e facilitando eventuali modifiche e aggiornamenti. Basta cambiare una delle voci contenute nel foglio di stile affinché la variante si propaghi immediatamente su tutte le pagine del sito che contengono quel particolare elemento.
Purtroppo i browser fino alla generazione 4 non erano compatibili con le funzioni dei CSS e perciò si è dovuto aspettare la diffusione capillare della generazione 5 per cominciare a vedere siti che ne facessero un impiego concreco. La compatibilità è cresciuta ulteriormente con l'arrivo dei browser della generazione 6 e poiché possiamo ormai considerare tramontata la stagione dei vari Internet Explorer 4.0 e Netscape 4.x, tanto vale abbandonare l'impiego dei tag fisici, in particolare <font> e abbracciare in toto i CSS nella nostra progettazione tipografica. Raggiungeremo il doppio obiettivo di essere pienamente conformi alle specifiche di HTML 4.01, che depreca l'uso di tag stilistici, e di beneficiare delle evidenti potenzialità dei CSS.
Avendo così eliminato anche i vari tag particolari che accompagnavano le diverse famiglie di browser, diventa possibile realizzare soluzioni tipografiche che siano compatibili a trecentosessanta gradi, senza doversi far carico di produrre versioni diverse della stessa pagina a seconda del browser utilizzato dal navigatore, come invece accadeva in passato.
Separare la forma dalla struttura
Il sogno di qualsiasi progettista di siti è la separazione degli attributi tipografici e stilistici dalle componenti strutturali della pagina, soprattutto in siti di tipo dinamico. Tale separazione è importante per raggiungere un adeguato livello di efficienza nella gestione del sito. Infatti, fintantoché gli elementi stilistici sono mescolati con il codice HTML, è necessario chiamare in causa il Webmaster per ogni singola modifica estetica, modifica che deve essere replicata a mano, pagina per pagina. Se poi si trattava di un sito dinamico, diventa addirittura necessario chiamare in causa un programmatore oppure un Web developer, perché il colore di sfondo e le font del testo sono indissolubilmente legate ai tag del linguaggio di scripting che fa funzionare la pagina in abbinamento al database.
Ogni modifica nell'aspetto della pagina diventa perciò costosa e impegnativa, tanto da scoraggiare la revisione stilistica di molti siti che non riescono perciò a migliorare la propria usabilità, la propria navigabilità e la propria estetica sulla scorta delle informazioni raccolte dai navigatori durante l'uso del sito.
I CSS sono il primo strumento che ha consentito di separare i due mondi e di lasciare una notevole libertà d'intervento ai creativi senza interferire con il lavoro di programmazione e di gestione del codice HTML eseguito dai tecnici. Inoltre, fornendo una gamma di opzioni tipografiche molto ampia, ha consentito anche a chi non è creativo di produrre risultati presentabili e gradevoli, con poco sforzo.
La nascita dei fogli di stile e dell'HTML 4.0 risolve anche una stortura concettuale introdotta nel Web con il rilascio della versione 3.2 di HTML che ha rinnegato la natura originale del linguaggio, nato per controllare la struttura e non la presentazione di una pagina, per assecondare i desideri dei vari produttori di browser, creando così enormi problemi di compatibilità e di manutenibilità dei siti, per non parlare della loro usabilità.
Tuttavia i Cascading Style Sheets non si limitano agli attributi tipografici, bensì consentono di posizionare con precisione gli elementi sulla pagina, sostituendosi alle tabelle come metodo per definire il layout, e introducono anche una certa dose d'interattività nella pagina, facilmente accessibile anche da chi non conosce linguaggi di programmazione come JavaScript.
Relazione tra CSS e HTML
I fogli di stile definiscono un insieme di regole per indicare il tipo di formattazione da applicare ai contenuti di una pagina stampata o visualizzata elettronicamente. Nascono concettualmente nel mondo dell'editoria dove, per semplificare il lavoro, gli attributi tipografici di un libro vengono definiti prima d'iniziarne la stesura e vengono mantenuti separati dal testo vero e proprio così da poter essere applicati in modo uniforme a più testi della stessa collana e poter essere modificati rapidamente senza dover ripassare a mano ogni singola pagina del volume.
Nel Web costituiscono un complemento di HTML e si sposano con i tag di quest'ultimo in modo abbastanza semplice e intuitivo. Per aggiungerli alla pagina basa digitare codice aggiuntivo che non interferisce con il codice HTML originale in quale viene comunque riconosciuto senza problemi dai browser di vecchia generazione. In effetti è persino possibile combinare nella stessa pagina CSS e marcatori fisici, come ad esempio <font>, al fine di avere la piena compatibilità con tutti i tipi di browser in circolazione, sfruttando al tempo stesso le funzioni evolute dei fogli di stile. In tal caso, la pagina avrà un aspetto più gradevole quando visualizzata da un browser di generazione 5 o 6, ma sarà comunque utilizzabile su un browser di generazione 4.
Le tre funzioni primarie di un foglio di stile sono: impostare gli attributi tipografici del testo, definire un livello e la sua posizione nella pagina (vedremo più avanti di che si tratta), modificare le caratteristiche originali dei tag HTML.
Esempio di un foglio di stile
Ecco il formato tipico di un foglio di stile. E' un semplice file di testo o porzione di pagina HTML, dove ogni regola è composta da un selettore (in rosso) e da una dichiarazione (tra parentesi graffe) che riunisce una serie di proprietà e di valori corrispondenti che spiegano in che modo il selettore (un elemento HTML) deve essere visualizzato e perciò modificato rispetto alle proprie caratteristiche originali.

|