Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del
W3C. La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l'ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del Consortium, HTML, così come la sua recente evoluzione, XHTML, dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento. Per questo obiettivo, ovvero arricchire l'aspetto visuale ed estetico di una pagina, lo strumento designato sono appunto i CSS. L'ideale perseguito da anni si può sintetizzare con una nota espressione: separare il contenuto dalla presentazione.
La prima specifica ufficiale di CSS (
CSS1) risale al dicembre del 1996. Nel maggio 1998 è stata la volta della seconda versione:
CSS2. Niente stravolgimenti, ma molte aggiunte rispetto alla prima. CSS2 non è altro che CSS1 più alcune nuove proprietà, valori di proprietà e definizioni per stili non canonici come quelli rivolti alla stampa o alla definizione di contenuti audio. E' attualmente allo stato di Working Draft la nuova specifica
CSS3.
A cosa servono
Inizio questa sezione con un'affermazione perentoria: se siete seriamente interessati alle tecnologie web non potete ignorare i CSS. Chi conosce un minimo di HTML è pienamente consapevole dei limiti di questo linguaggio sul lato della pura presentazione. A dire il vero, non è giusto parlare di limiti: HTML non è nato per questo. E' stato però piegato a fare cose che intrinsecamente non era in grado di fare. Bene: quasi tutto quello che con HTML non potete realizzare, riuscirete a farlo con i fogli di stile.
Finalmente, ad esempio, potrete dare al testo delle vostre pagine un aspetto da word-processor: non solo con il colore o i font che preferite, ma con un sistema di interlinea pratico e funzionale, con le decorazioni che desiderate, riuscendo a spaziare lettere e parole, impostando stili diversi per titoli e paragrafi, sfruttando i benefici dell'indentatura o della giustificazione.
Ancora, potrete finalmente distanziare gli elementi della vostra pagina in maniera semplice e intuitiva con un potente meccanismo di gestione dei margini. Tonnellate di gif trasparenti usate per spaziare possono essere finalmente gettate nel cestino del vostro computer. E se i margini non bastano sarete in grado ora di aggiungere bellisimi bordi non solo alle tabelle, ma a tutti gli elementi di una pagina.
Per non parlare degli sfondi: li potrete applicare a quello che volete. E dimenticate quelle brutte micro-textures. Finalmente potrete sbattere su una pagina, magari ben piazzato al centro, quel vostro bellissimo disegno di 600x400 pixel senza doverlo necesseriamente vedere trasformato in orribili riquadri ripetuti sulla pagina.Ora siete voi a decidere come usare un'immagine di sfondo: la potete ripetere in una sola direzione, in due o per niente! Facile e comodo.
La cosa più bella è che la gestione del sito non sarà mai più un incubo. Se quel bellissimo disegno di prima vi stufa, non dovrete più andare a modificare una per una 300 pagine! I CSS sono separati dal documento. Aprite un foglio di stile, cambiate l'immagine e il gioco è fatto. Il risultato sono pagine più leggere e facili da modificare. Milioni di byte di banda risparmiati per la gioia degli utenti.
Se poi avete a cuore l'
accessibilità i CSS sono uno strumento portentoso, anche grazie al fatto di poter essere gestiti con linguaggi di scripting avanzati in grado di modificare con un solo click l'aspetto di una pagina.
Spero e credo che queste semplici considerazioni possano invogliarvi a procedere nella lettura di questa guida di base in cui troverete la spiegazione di tutte le proprietà e dei meccanismi che regolano questo meraviglioso strumento. Quando avrete superato il livello di apprendistato non dimenticate di dare un'occhiata alla sezione
PRO di HTML.it. Tanti articoli di approfondimento vi aspettano per farvi sfruttare al meglio le potenzialità del linguaggio.
Guida alla consultazione
Un primo avviso: per una lettura consapevole della guida è richiesta una buona conoscenza di
HTML e
XHTML. In fini dei conti i CSS agiscono su questi linguaggi e non hanno alcun senso se separati da essi.
La guida è suddivisa in tre parti:
1. Nella prima affronteremo i concetti di base, ovvero i meccanismi e i costrutti che regolano il linguaggio e la sua interazione con (X)HTML.
2. La seconda parte comprende l'elenco ragionato delle proprietà CSS2 suddivise per ambito di applicazione (sfondo, colore, testo, etc)
3. Nella terza forniremo suggerimenti e proposte di approfondimento con bibliografia e webbografia.
Quasi tutte le lezioni sono corredate di pagine di esempio. Esse non vanno considerate come un semplice matariale accessorio, ma sono parte integrante e costitutiva della guida. Contengono sempre note di commento ulteriore ed esempi di codice sugli argomenti trattati. Abbiamo anzi pensato di farvi un regalo. Le abbiamo raccolte, insieme ai CSS che ne definiscono lo stile, in un file zip. Scaricatele. Studiatevi comodamente il codice (X)HTML e quello dei fogli di stile. Giocateci un pò. Modificate le proprietà e fate i vostri esperimenti. Vi assicuro che è il modo migliore per imparare.
Scarica il file "
test.zip".
Nel proporre il riferimento alle proprietà ci siamo limitati all'esposizione della loro sintassi e del funzionamento di base. Non vengono affrontati in questa sede problemi di compatibilità o di bug di singoli browser nel trattamento di tali proprietà (salvo casi importanti). Rimandiamo alle risorse citate nell'ultima parte per approfondimenti sulla questione.
Un aspetto che tengo a sottolineare è quello della traduzione: abbiamo tentato di tradurre in italiano i nomi di molte parole chiave, ma abbiamo sempre dato il corrispondente in inglese. Il motivo è semplice: la bibliografia e le risorse online sono quasi tutte in quella lingua e una non consapevolezza di certi termini potrebbe evidentemente spiazzarvi.
A questo punto non mi rimane che esprimervi il canonico "Buona lettura". Aggiungendo, come sempre, la mia disponibilità e massima apertura per aiuti, suggerimenti, critiche e consigli. Buona lettura!
