Continuiamo con l'esempio del nostro sito. Come potete notare in questo articolo esistono dei "box" di testo di diversi colori, il cui scopo è suddividere i paragrafi di teoria, pratica e problematiche oltre a dare un'impostazione grafica più gradevole per il visitatore.

In una pagina html classica questo sarebbe fatto impostando paragrafo per paragrafo i colore di sfondo e di bordo del box, oltre magari alle dimensioni del carattere i magini e l'indentazione. In pratica un sacco di lavoro ad ogni apertura di un nuovo box, immaginate poi se un giorno decidessi che al osto del verde preferissi un bel azzurro, dovrei sostituire tutto il codice di tutti gli articoli, un lavoro disumano!!

La realtà grazie ai CSS è decisamente più rosea.

Tutto quello che devo dare è infatti definire un "separatore", un tag HTML particolare (in questo caso il tag <div> ) e assegnagli una CLASSE di appartenenza. Supponiamo di voler creare un riquadro verde, associato nella nostra logica ad un argomento teorico, il nostro codice HTML sarà:

Se visualizziamo la pagina, non noteremo nulla di particolare: il tag <div> infatti non prevede alcuna formattazione predefinita, è un semplice "divisore". Il nostro testo è quindi isolato (dentro in divisore) e facilmente identificabile (appartiene alla classe "teoria" ) con il minimo sforzo possibile, un semplice tag. Il contenuto in questo modo rimane l'informazione prevalente all'interno della pagina, e il codice html ha un impatto minimo su chi analizza il sorgente.

Passiamo quindi alla creazione di un foglio di stile che ci permetta di applicare una formattazione al nostro testo.

Creiamo un file con estensione CSS come ad esempio stile.css e al suo interno scriviamo il seguente codice:

Cosa stiamo facendo? Semplicissimo stiamo definendo un insieme di regole comuni per la classe "teoria", impostando il colore di sfondo, del carattere, del bordo, margini e indentazione. In questo modo qualsiasi elemento della classe interessata erediterà automaticamente le impostazioni definite una sola volta all'interno del nostro css

L'unica cosa che manca per completare l'opera è inserire all'interno della pagina html il riferimento al nostro foglio di stile aggiungendo nell'HEAD il seguente codice:

Vogliamo creare un altro box verde? Non serve replicare tutto il codice dello stile, ma semplicemente aprire una altro tag della classe "teoria" ed il gioco è fatto.

Abbiamo creato box ovunque ma il verde non ci piace piu? Non serve scartabellare tra decine di file html, basta cambiare il verde in azzurro nel nostro css e la modifica sarà immediata e condivisa dall'intero sito.

In questo modo chi scriverà l'articolo dovrà occuparsi esclusivamente del contenuti dello stesso, e con pochi colpi di mouse il webmaster sarà in grado di formattare il testo in maniera da renderlo uniforma col resto del sito.

Ma i vantaggi non sono ancora finiti. Avete notato la clausola media="all" che abbiamo inserito quando abbiamo collegato l'html al foglio di stile? Anche lui fornisce delle interessanti possibilità

E' infatti possibile definire fogli di stile diversi a seconda del dispostivo che accede alla pagina.

Un esempio utilissimo riguarda il Media="print" che riguarda... la vostra stampante!

Quanti di voi avranno maledetto le tonnellate di inchiostro perso per stampare una pagina web con un testo circondato di immagini pubblicitarie o magari avete stampato una pagina e la stampante ha pensato bene di troncarvi a metà una frase perchè la pagina era più larga del vostro classico A4

Specificando un css differente invece potete cambiare totalmente stile alla pagina solo per quanto riguarda la stampa: l'utente continuerà a visualizzare sul browser tutti i colori e le immagini che volete, ma alla pressione del tasto stampa la vostra stampante riceverà un perfetto documento in bianco e nero con tutte le misure necessarie per essere perfettamente impaginato. Non male vero

Supponiamo di avere una classica tabella html, magari con un sacco di dati e vogliamo formattarla in maniera decisamente più accattivanti.

La classica formattazione e rappresentazione sarebbe la seguente:

Non molto gradevole non è vero? Proviamo a migliorare il tutto tramite css, innanzitutto cambiamo leggermente l'html per predisporlo alle modifiche, aggiungiamo una classe per la tabella, per gli header e per le righe, magari alternando colonne pari e dispari con classi differenti.

In questa maniera abbiamo creato differenti identificativi:

1. id=stats_datatable che comprende l'intera tabella e assegna un id unico alla nostra tabella
2. class=tr_even che specifica l'appartenenza ad una classe che utilizzeremo per le righe dispari
3. class=tr_odd che specifica l'appartenenza ad una classe che utilizzeremo per le righe pari

La differenza tra classe e id risiede semplicemente nel fatto che un ID dovrebbe essere unico all'interno di una pagina, quindi lo utilizzeremo per specificare elementi di stile riservati ad un solo oggetto (la nostra tabella), mentre utilizzeremo le classi per stili da condividere tra più elementi (come ad esempio le righe della tabella)

Nel nostro file "stile.css" scriveremo quindi il seguente codice:

Come potete facilmente notare le specifiche per il tipo ID sono caratterizzate dal cancelletto preposto al nome ( #stats_datatable ) , mentre le CLASS utilizzano il punto ( .tr_odd .tr_even).

Infine , solo soletto, il set di regole denominato th, il quale, non avendo nè classe nè id, ed essendo una parola chiave html, andrà ad applicare la formattazione a TUTTI i tag presenti nel codice

Semplice ma molto potente vero? Guardate ora che bella la nostra tabella...decisamente più gradevole, non trovate?

Per concludere in bellezza, aggiungiamo una finezza, supponiamo di avere molti più dati da mostrare e poco spazio a disposizione, non sarebbe bello se, superata una certo numero di righe, apparisse un comodo scrollbar in modo da poter scorrere tutti i dati senza bisogno di ulteriore spazio?

Niente di più semplice, basterà includere la tabella all'interno di un apposito <div> e attribuirgli nel foglio di stile una altezza fissa e l'opzione overflow:auto che farà comparire la scrollbar solo quando tale altezza sarà superata.

Io vi lascio lo screenshot, a voi la realizzazione come primo esperimento coi CSS...

Nel caso aveste bisogno qualche guida di riferimento, la W3C è il gruppo che si occupa di definire lo standard per i CSS

Fornisce inoltre uno strumento di validazione e controllo di HTML fogli di stile. Se superate tale test potrete esporre sul vostro sito un mini-banner che attesta la correttezza del vostro codice!!