Benvenuti su questa mia guida dedicata ai fogli di style o CSS. Non ha la pretesa di insegnare tutte le molteplici tecniche legate a questo modo di integrare stile nelle pagine web ma vuole, con tutta onestà, essere qualcosa di più di una semplice introduzione al metodo, così da rendere  bene l'idea di che cosa siano, a cosa servono e come si adoperano i CSS.

Quando ho scritto la primissima versione di questa guida erano davvero pochi i siti che ne facevano uso. Oggi le parti si sono invertite e quelli che non li adoperano sono ormai piuttosto rari e di sicuro obsoleti.

E' possibile scaricare la guida anche in formato compresso .zip (E-book o PDF) per poterla stampare su carta o consultare a video comodamente off-line, cioè scollegati dalla rete, è sufficiente cliccare su questo link: Scarica Guida CSS

Attenzione! eventuali ultime modifiche potrebbero non essere state ancora inserite in questa versione on line (priorità alla versione zip), questa on line viene infatti aggiornata ad intervalli prestabiliti o quando ci siano modifiche di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi.

Una sola raccomandazione: nelle mie spiegazioni, per quanto abbia cercato di renderle più semplici e comprensibili possibile, ho dato per scontato che voi sappiate muovere almeno i primi passi con HTML, per cui se così non fosse molte delle cose scritte potrebbero risultare incomprensibili, a questo proposito vi rimando alla lettura dell'altra mia guida: "primi passi in HTML" dove sarà possibile apprendere i concetti di base di questo metaliguaggio.

Per parlare dei fogli di style e vedere finalmente a cosa servono e cosa producono, vi basta notare l'impaginazione di questo documento: lo sfondo, la giustificazione del testo, i suoi margini dai bordi, i vari rientri ad inizio paragrafo, il titolo sotto (la barra di scorrimento laterale colorata per chi adopera Internet Explorer), sono soltanto alcune delle cose fattibili con i css, che non sono riportati in ogni singola pagina html ma definiti una sola volta per tutte in un foglio di stile esterno. Come minimo in questo momento state pensando "comodo però" o no?

I CSS, ovvero i Cascading Style Sheets sono ormai divenuti molto comuni sul web, servono per migliorare l'aspetto estetico e al tempo stesso facilitare la creazione o la manutenzione di siti web e questo a prescindere che si tratti di poche pagine o grossi portali.

Se combinati con un linguaggio di scripting, quale per esempio JavaScript, danno vita al DHTML ovvero un HTML Dinamico, consentendo di superare quelli che erano considerati un tempo i limiti di html standard.

Con questa tecnica è possibile creare persino delle vere e proprie animazioni sfruttando l'elevata versatilità offerta dal posizionamento degli oggetti sullo schermo, siano essi grafici oppure no, posizionamento che a differenza del solo html è ora possibile fare con accurata precisione.

Come quasi tutte le cose di questo mondo vanno create, per cui scegliete cosa preferite fare, se procurarvi un editor specifico per CSS oppure adoperare lo stesso editor che usate abitualmente per le vostre pagine html.

Se non avete un editor specifico vi ricordo che anche in questo caso, così come per html, il notepad o il wordpad a corredo di windows andranno benissimo. Il mio consiglio è quello di procurarvi un editor per CSS, vi sarà di maggiore aiuto. vi consiglio per esempio TopStyle nella sua versione free.

Vorrei ribadire che per fare uso di questa "tecnica" si deve necessariamente conoscere un minimo di html essendo di fatto i fogli di style un'estensione di html stesso. Senza le conoscenze di base di questo metalinguaggio sarebbe davvero difficile capirli ed utilizzarli al meglio.

Dovendo illustrarli in modo sintetico direi che non si limitano a giustificare il testo o a stabilirne i suoi rientri; pensate alle dimensioni dei caratteri, non esistono più limiti. E le immagini? queste possono essere sovrapposte come se si trattasse di piani trasparenti dove ad ognuno dei quali assegnare una diversa priorità di visualizzazione. In poche parole: se non ci fossero stati si sarebbero dovuti inventare.

Da non trascurare neppure l'aspetto pratico legato al risparmio di tempo e di energie in fase di stesura e modifiche. Provate ad immaginare un sito composto da decine (a volte centinaia) di pagine e che queste facciano tutte riferimento ad un solo unico foglio o ad un gruppo di fogli di stile, sarà sufficiente una modifica a quel foglio per vedere immediatamente la modifica applicata a tutte le pagine che lo richiamano.

C'è soltanto da chiedersi perché mai un sistema che a prima vista offre solo vantaggi abbia trovato difficoltà nel raggiungere finalmente oggi il successo che meritava.

L'unica possibile spiegazione che ho trovato è stata quella che non tutti i browser li supportavano ed ancora oggi non vengono in alcuni casi supportati allo stesso modo, fra i vari browser ci sono differenze a volte davvero sorprendenti e tali da scoraggiare chi ha deciso di farne uso, specie poi se questo qualcuno non è mai stato veramente convinto di usarli.

Ultimamente le cose sono cambiate, forse il predominio del browser IE è venuto meno, è lui infatti che meno di altri rispetta le regole dettate dal W3C( organo ufficiale che si preoccupa di stabilirne le regole). Di fatto trovare oggi un sito che non faccia uso di questa tecnica è cosa abbastanza rara.

Finita questa premessa credo si possa passare al lato pratico per capire finalmente come si adoperano.

Per prima cosa hanno un loro elemento (tag) che viene specificato in html, si tratta dell'elemento: <style> e relativa chiusura </style>. Questo elemento serve ad informare il browser che si tratta di stili e che questi apporteranno le dovute modifiche ai vari elementi (tags) di HTML definiti al loro interno, tutti i tags nessuno escluso, dipenderà soltanto dalle combinazioni che si vorranno creare.

Fondamentalmente sono tre i modi di usare i css, quale sia il migliore dipende soltanto da voi, dalla vostra organizzazione mentale e dalle vostre reali esigenze:

1.   Direttamente In linea
2.   Ad inizio pagina a stile incorporato
3.   Nel collegamento ad un foglio di stile esterno

Andrea Bianchi