CSS: un menu che sfrutta l'effetto hover

Le specifiche del W3C prevedono per i link i seguenti stati: active (attivo), visited (già visitato) e hover (la freccia del mouse è sopra il link). Questa importante distinzione fra gli stati di un link ci permette di personalizzare nel foglio di stile l'aspetto del link! Nell'esempio che vi propongo realizzeremo un semplice menu, con più voci.

L'elenco dei collegamenti del nostro menu è realizzato con elementi li, appartenenti alla lista non ordinata ul. Per poter descrivere lo stile delle voci che inseriremo nella lista forniamo questa prima regola:


#menu {
 list-style: none;
 font-family: arial;
 font-size: 12px;
}


che oltre a descrivere le proprietà per il testo deseleziona l'elemento stilistico che solitamente precede una voce dell'elenco (di solito un disco pieno). La lista contiene uno o più elementi li, ogni voce dell'elenco inizia tuttavia su una nuova riga. In altre parole l'elemento li è un elemento di blocco, pertanto se siamo interessati ad avere un menu orizzontale dobbiamo necessariamente dare questa regola:


#menu li {
 display: inline;
}


Dopo questa regola, l'elemento li diventa un elemento in linea! Procediamo nella stesura del foglio di stile, ogni elemento li conterrà un link (tag a) alla pagina del sito. Come deve essere formattato questo tag?


#menu li a {
 text-decoration: none;
 padding: 5px;
 color: #000066;
}


Qui ho deciso di non applicare nessuna decorazione al testo, che per un link consiste di default in una linea che sottintende il testo. Cosa deve avvenire quando la freccia del mouse passa sul link?


#menu li a:hover {
 border-bottom: red solid 4px;
 color: #0000fd;
}


Il testo assume una tonalità più chiara rispetto al colore di base e una linea spessa sottolinea la voce puntata dal mouse. Per rendere l'aspetto del menu più piacevole ho poi aggiunto una linea orizzontale, spostata in maniera tale da coincidere (qualche pixel più in giù) con la linea che compare al passaggio del mouse sul link.


#cornice hr {
 border-width: 0;
 height: 2px;
 color: red;
 background-color: red;
 margin: -5px;
}


L'effetto noshade (una proprietà del tag hr) dell'html è stato deprecato dal W3C, che adesso consiglia di usare il foglio di stile per ottenere una linea senza ombreggiatura. Qui è possibile vedere il foglio di stile completo, questa inveca è la pagina html con il menu.

CSS, la formattazione del testo

La formattazione del testo attraverso i fogli di stile migliora di molto la resa finale del documento oltre a semplificare il compito per il web designer che adesso dispone di utili proprietà per: specificare un elenco di font da usare per il documento, usare dimensioni assolute o relative per i font, modificare il sistema di interlinea (la spaziatura fra le righe), applicare particolari decorazioni al testo etc... Andiamo per ordine e iniziamo subito la presentazione delle proprietà per la gestione del testo.

font-family

Una volta nell'HTML si indicava un solo font da usare per l'elemento del documento, e se questo non era disponibile presso l'utente? Il browser applicava (lo fa tutt'ora se scrivete il documento esclusivamente in HTML, senza usare CSS) un font di default. Ovviamente questo non garantisce la stessa impressione che il web-designer voleva trasmettere al lettore! Con la proprietà font-family dei fogli di stile è possibile impostare il tipo di carattere da assegnare al testo e da lasciare in eredità agli elementi figli. Le novità portate dai fogli di stile non si esauriscono alla possibilità di ereditarietà ma vanno ben oltre, con la proprietà font-family il web designer può specificare non uno ma bensì una lista di font!

E' il web designer che suggerisce al browser questo elenco, tutti i fonti sono quindi compatibili con lo stile grafico adottato nel documento (almeno così dovrebbe essere).

La lista raccoglie un elenco di font, ognuno separato dal successivo da una virgola. Attenzione, se il nome di un font è composto da più parole occorre racchiudere lo stesso fra virgolette! La lista di font deve poi terminare con un punto e virgola (per rendere valida la regola!). Ogni sistema operativo mappa dietro alcuni nomi di famiglie di caratteri uno o o più font predefiniti. Si consiglia di mettere al termine della lista una famiglia di font, come ultima possibilità! Le famiglie di font definite dal W3C per i fogli di stile sono: serif, sans-serif, cursive, fantasy e monospace. All'interno di queste famiglie di caratteri vengono quindi mappati tutti i font simili tra loro. La sintassi prevista per la scelta dei font deve rispettare la seguente struttura: selettore {font-family: font1,font2,...,famiglia_generica;}. Ecco subito un esempio: p {font-family: Arial, Helvetica, sans-serif;}.

font-size

Questa proprietà permette di regolare le dimensioni dei font, si applica a tutti gli elementi ed è ereditata dagli elementi figli. La dimensione di un font può essere assoluta (indipendente cioè da nessun'altra dimensione) oppure relativa (valutata in relazione alle dimensioni dell'elemento padre!). Alcune parole chiavi usate per le dimensioni assolute sono: xx-small, x-small, small, medium, large, x-large, xx-large, px (per i pixel), cm (per i centimetri), mm (per i millimetri), pt (per i punti, la più usata) e in (per i pollici). Le parole chiavi per i valori relativi sono: smaller, larger, em e % (per i valori percentuali). Un esempio: p {font-size: 12px;}.

font-weight

Esprime il peso del testo ovvero l'intensità e lo spessore dei punti che disegnano i caratteri. Si applica a tutti gli elementi e viene ereditato dagli elementi figli. La sintassi prevista dal W3C è la seguente: selettore {font-weight: valore;}. Dove valore può essere: un valore numerico che va da 100 a 900, normal (che corrisponde a 400), bold (che corrisponde a 700), bolder (più pesante rispetto al testo dell'elemento padre) e infine lighter (più leggero rispetto al testo dell'elemento padre). Un esempio: p {font-weight_ bold}

font-style

Assegna uno stile al testo, osserva questa sintassi: selettore {font-style: valore}. Questi i valori previsti: normal per il testo normale (valore di default), italic per il testo scritto in corsivo e oblique per schiacciare ancora di più il testo rispetto a quanto già fa italic. Un esempio: p {font-style: italic;}.

line-height

Descrive lo spazio che deve esistere fra due linee di testo. Osserva questa sintassi: selettore {line-height: valore;}. I possibili valori sono: normal, le righe di testo sono separate come solitamente avviene (è l'impostazione di default); numero, lo spazio fra le righe corrisponde al prodotto fra la dimensione data al font e il numero scelto; numero unità, lo spazio fra le righe di testo coincide con il valore e l'unità di misura data; numero%, lo spazio fra le righe di testo è una percentuale della dimensione data al font. Un esempio: p {line-height: 15px;}

font

Consente di specificare su unica riga tutte le (singole) proprietà fin qui viste. La sintassi da rispettare è la seguente: selettore {font: valori;}. Attenzione, i valori delle singole proprietà sono separati fra loro da un carattere di spazio. Per la lista di font, invece, occorre usare una o più virgole come elemento separatore.

Font di sistema

Vi piacerebbe usare nel documento gli stessi font usati dal sistema operativo?

Con i fogli di stile è possibile fare anche questo. A tale proposito il W3C ha definito le parole chiavi per far riferimento agli elementi del sistema operativo che prevedono all'interno il testo. Ecco l'elenco delle parole da ricordare: caption, per il font usato nei pulsanti; icon, per il font usato nelle label delle icone; menu, per il font usato nel menu dei programmi; message-box, per il font usato nei messaggi di sistema; status-bar, per il font usato dalla barra di stato. Un esempio: p {font: menu}.

Notate l'assenza di altri parametri, in questo modo non solo si userà il font di sistema ma verrà rispettato anche lo stile e le dimensioni date dal sistema operativo all'elemento di riferimento scelto!

Allineamento del testo

La sintassi prevista è la seguente: selettore {text-align: valore;}. Dove valore può essere: left, allinea il testo a sinistra; right, allinea il testo a destro; center, allinea il testo al centro; justify, giustifica il testo a destro e a sinistra. Un esempio: p {text-align: justify}.

text-decoration

Con questa proprietà possiamo assegnare al testo alcune semplici decorazioni. La sintassi da rispettare è la seguente: selettore {text-decoration: valore1, valore2, ...;}. I possibili valori sono: none, per nessuna decorazione; underline, il testo viene sottolineato; overline, il testo viene marcato in alto con una linea; line-through, il testo viene barrato da una linea; blink, il testo lampeggia! Un esempio: #urgent {text-decoration: blink;}.

CSS, gestione dello sfondo

Se prima di iniziare a usare i fogli di stile avete fatto in passato qualche esperienza con il codice dell'HTML sapete allora che colori e sfondi potevano essere assegnati alle tabelle e all'elemento body del documento. E che effetti! Le limitazioni dell'HTML erano combattute proprio con le tabelle. Spesse volte, ricordo, si costruiva la struttura del sito all'interno di tabelle con celle trasparenti e comunque riempite con immagini di contorno nel tentativo di centrare lo sfondo e allinearlo così come esso doveva apparire. Senza questi stratagemmi l'immagine di sfondo veniva ripetuta fino a riempire tutta la pagina!

I fogli di stile mettono fine a questo genere di lavori, adesso è possibile regolare lo sfondo attraverso le proprietà (singole): background-color, background-image, background-repeat, background-attachment e background-position. Se vogliamo invece descrivere le proprietà dello sfondo su un unica riga possiamo farlo attraverso la proprietà (multipla) background.

background-color

Attraverso questa proprietà possiamo assegnare all'elemento un colore di sfondo. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-color: valore}, dove valore corrisponde a una delle strutture già viste per la selezione di un colore oppure corrisponde alla parola chiave trasparent.

background-image

Attraverso questa proprietà possiamo assegnare all'elemento un'immagine di sfondo. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-image: url(valore);}, dove valore può corrispondere a none (nessuna immagine) oppure a un indirizzo (assoluto o relativo) che punta alla risorsa e quindi all'immagine.

Osservazione: conviene impostare solo il colore oppure solo l'immagine?

La logica (quella che stabilisce il comportamento del browser) dice che conviene impostare entrambe le proprietà, anche se l'immagine prevale sul colore scelto. Perché , allora, impostare entrambi i valori? Se il browser dell'utente ha disabilitato la visualizzazione delle immagini (oppure la stessa immagine non è più disponibile presso l'url indicato, ad esempio) l'oggetto verrà riempito con il colore scelto. Scegliete sempre un colore di sfondo per l'oggetto!

background-repeat

Attraverso questa proprietà possiamo suggerire al browser come ripetere l'immagine nell'oggetto. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-repeat: valore;}, dove valore corrisponde a uno dei seguenti valori: repeat, l'immagine viene ripetuta fino a riempire tutto l'elemento (come fa di default l'HTML); repeat-x, l'immagine viene ripetuta fino a riempire in orizzontale tutto l'elemento; repeat-y, l'immagine viene ripetuta fino a riempire in verticale tutto l'elemento; no-repeat, l'immagine è riportata nell'oggetto una sola volta (a partire dall'angolo in alto a sinistra).

background-attachment

Attraverso questa proprietà possiamo assegnare all'immagine dell'elemento la modalità di fissaggio alla pagina. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-attachment: valore;}, dove valore può corrispondere a: scroll (l'immagine scorre assieme al testo del documento) oppure a fixed (l'immagine resta attaccata al documento e il testo gli scorre sopra).

background-position

Attraverso questa proprietà possiamo indicare le coordinate da applicare all'immagine dell'elemento. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-position: ascissa ordinata;}.

background

Attraverso questa proprietà possiamo assegnare, come dicevo all'inizio, tutte le singole proprietà fin qui viste. La sintassi prevede l'elenco dei valori (separati da un carattere di spazio) in un ordine anche diverso da quello che presento qui:

selettore{background-color background-image background-repeat background-attachment background-position;}

Notate la presenza del carattere ; che chiude la lista! Come dicevo poco fa l'ordine delle singole proprietà non è importante (è sufficiente la sola presenza della proprietà background-color per validare tutta la regola), tanto il browser riesce in ogni caso ad associare i valori alle singole proprietà dal momento che esse non danno luogo ad ambiguità e incomprensioni.

CSS, scegliere un colore

La selezione di un colore, la proprietà color, da assegnare a un elemento può avvenire in diversi modi. Fra questi il modo più semplice è sicuramente quello che permette di indicare un colore chiamandolo per nome. Il W3C ha definito 16 nomi per i colori di default, sono: black, navy, blue, maroon, purple, green, red, teal, fuchsia, olive, lime, gray, acqua, silver, yellow e white.

Se il colore che cerchiamo non è fra quelli elencati possiamo allora selezionarlo mediante il codice esadecimale che ne caratterizza le componenti primarie, attraverso la struttura: #RRGGBB.

E' possibile indicare anche le percentuali di ogni componente. Ciò può essere fatto attraverso questa struttura: rgb(R%,G%,B%), con R, G e B numeri interi compressi nell'intervallo che va da 0 a 100. Esiste inoltre anche una diversa struttura che permette di indicare le componenti come numeri interi che vanno da 0 a 255: rgb(0,0,0).

La proprietà color assegna il colore scelto al testo dell'oggetto. Lo stesso colore, poi, viene esteso anche al bordo della cornice (se la proprietà border-color non ne indica uno diverso!).

Le strutture per la scelta dei colori si applicano alle proprietà background-color, foreground-color e border-color. La sintassi da usare prevede la scelta di un selettore e la descrizione della proprietà color, secondo uno degli schemi visti sopra: selettore{color: valore;}.

La parola chiave inherit, se assegnata come valore di color, dice al browser che sta interpretando la pagina di estendere il colore dell'elemento padre anche all'elemento figlio. A questo indirizzo trovate un utile applicazione per la selezione di un colore attraverso il suo valore esadecimale. Alcuni esempi:

p {background-color: teal;}
h1 {background-color: #00AACC;}
h2 {background-color: rgb(0%,0%,100%);}
h3 {background-color: rgb(0,0,0);}


CSS, il box model

Secondo le specifiche rilasciate dal W3C sui CSS ogni elemento (sia di blocco che in linea) è racchiuso da un rettangolo (box). A questo rettangolo si fa spesso riferimento con il nome di box model. E' importante imparare i nomi presenti all'interno del modello, in questo modo si apprendono anche i nomi delle proprietà che ne regolano gli aspetti!

L'area dell'elemento (un'immagine oppure un testo scritto, ad esempio) può essere variata modificando le proprietà width ed height che regolano, rispettivamente, larghezza e altezza dell'oggetto incorporato. Attenzione, tali parametri, come vedremo a breve, non caratterizzano l'effettiva estensione dell'oggetto!

Il padding è la distanza che intercorre fra l'elemento incorporato e la sua cornice. Questa distanza può essere modificata agendo sull'omonima proprietà padding, che applica un valore a tutti e quattro i lato della cornice. Tale proprietà è utile, ad esempio, se vogliamo tenere il testo distante dalla cornice. Se invece vogliamo dare un diverso valore per ogni lato possiamo allora ricorrere alle proprietà (singole): padding-top, padding-bottom, padding-left e padding-right. Attenzione, come già dicevo in passato alcune proprietà possono ricevere più valori sulla stessa linea, è questo il caso di padding! Se infatti diamo un solo valore a padding questo viene allora esteso a tutti e quattro i lati. Se diamo a padding due valori (separati da un carattere di spazio) questi, allora, verranno applicati a padding-top e padding-bottom. Ancora, se diamo a padding tre valori essi verranno applicati rispettivamente a padding-top, padding-bottom e l'ultimo valore a padding-left e padding-right. Infine, quindi, se diamo a padding quattro valori essi verranno applicati rispettivamente a padding-top, padding-bottom, padding-left e padding-right.

Anche la proprietà che definisce il bordo della cornice può essere modificata dal web designer, basta assegnare stile (proprietà style), colore (proprietà color) e spessore (width) a border (per applicarla a tutti e quattro i lati della cornice) oppure a border-top, border-bottom, border-left e border-right per applicarla a ogni singolo lato. Anche in questo caso possono essere dati più valori alla singola proprietà border, l'ordine è quello già visto per la proprietà padding.

La proprietà margin definisce la distanza (variabile) che deve esistere fra la cornice dell'elemento e gli altri elementi della pagina, essa è valida per ogni lato dell'oggetto. Le singole distanze da applicare ad ogni lato possono poi essere dettate sia attraverso la proprietà margin (con più valori, nello stesso ordine già visto per padding e border) e sia attraverso le singole proprietà: margin-top, margin-bottom, margin-left e margin-right.

La reale dimensione dell'elemento, come già detto all'inizio, non è quella descritta dalle proprietà width ed height ma è allora la somma di tutti gli spessori e le distanza che fanno da contorno all'oggetto! Per assimilare meglio il modello per un oggetto CSS ho preparato questa immagine:

CSS, ID e classi

L'associazione fra gli elementi del documento html e regole di formattazione avviene mediante l'uso degli attributi id e class. Entrambi vanno quindi assegnati ai tag del documento. Ma quando conviene usare uno oppure l'altro?

L'uso di un attributo piuttosto che l'altro favorisce alcuni scenari che impareremo presto a riconoscere. La definizione di una classe di stile in un CSS avviene facendo seguire al nome della classe un punto (nel documento che descrive il foglio di stile). La descrizione della classe continua poi nel modo già visto quando abbiamo parlato della struttura di una regola.

.testoBianco{color: white;}

Questo selettore viene applicato a tutti i tag dell'HTML (quindi alla classe di tag) che hanno l'attributo class in questo modo: class="testoBianco". Se sono invece interessato a far valere lo stesso selettore a un preciso gruppo di tag posso allora dichiarare nel foglio di stile lo stesso selettore in maniera assai più restrittiva, ad esempio con:

p.testoBianco{color: white;}

dico al browser di applicare il colore bianco al testo degli elementi p che hanno l'attributo class pari a class="testoBianco".

Con gli id, invece, è possibile identificare un solo elemento! In tal caso il nome del selettore è preceduto dal simbolo #, mentre la corrispondenza fra foglio di stile ed elemento avviene attraverso l'attributo id. Ad esempio, con:

#testoBianco{color: white;}

dico al browser di applicare il colore bianco al testo dell'elemento che ha l'attributo id pari a id="testoBianco". Attenzione, l'attributo id può essere usato per identificare univocamente un solo elemento (che deve poi essere unico nella pagina, anche se molti browser non applicano alla lettera questa specifica descritta dal W3C!). Pertanto, se una proprietà si applica a un solo elemento è preferibile usare l'attributo id, se la stessa deve invece valere per più elementi va usato l'attributo class.

CSS, struttura di una regola e commenti

Come dicevo qualche post fa un foglio di stile è una raccolta di regole per la formattazione del documento web, ma com'è fatta una regola per CSS?

Per definire una regola occorre scegliere e ridefinire le proprietà grafiche di un elemento standard dell'HTML, oppure inventare un nuovo selettore (definendo un ID oppure una classe come vedremo a breve). Il nome del selettore precede le parentesi graffe { e }, è all'interno di queste che vengono sistemate le proprietà e i valori. Il binomio proprietà: valore; definisce una regola per l'identificatore che si sta scrivendo. Notare la presenza del carattere :, che separa la proprietà dal valore e del carattere ;, che separa una regola dalla successiva. Le regole possono essere scritte tutte sulla stessa riga oppure ognuna su una nuova riga. Scegliete uno stile e usatelo in maniera coerente con il vostro documento.

p{color: blue; background: teal;}

Attraverso il selettore si potrà allora applicare lo stile grafico descritto all'elemento HTML presente nel documento, invocandolo laddove esso serve! Alcune proprietà chiederanno al web designer di esprimere un unico valore, una stringa oppure un numero seguito da un'unità di misura. Altre proprietà, invece, possono richiedere più valori.

E' possibile lasciare nel foglio di stile un commento racchiudendo la stesso fra i simboli /* e */ (che quindi aprono e chiudono, rispettivamente, la linea di commento).


/* Regole per il selettore p */
p{color: blue; background: teal;}


CSS, l'attributo media

L'informazione è oggi accessibile da più mezzi di telecomunicazioni. Non più solo computer quindi, ma oltre a questi accedono al web anche palmari, cellulari, console, web tv e altri dispositivi ancora. L'obiettivo dell'attributo media è quello di indicare al dispositivo che accede alla pagina lo stile grafico, se previsto dal web designer, adeguato al dispositivo stesso!

Una pagina web richiesta da un dispositivo al server potrebbe non adattarsi alle caratteristiche del browser in esecuzione, ad esempio, sul nostro palmare. Con un diverso foglio di stile, ora adatto al dispositivo, la stessa pagina web potrebbe risultare totalmente leggibile e più fruibile dall'utente (oltre a far risparmiare diverse operazioni di scrolling orizzontale della pagina, disponendo gli elementi della pagina in diverso modo). La stessa pagina web, poi, potrebbe essere stampata in diverso modo sul foglio, escludendo ad esempio alcuni elementi grafici (pubblicità o contenuti inutili) e far risparmiare in questo modo un po di inchiostro alla nostra stampante.

Ogni dispositivo può così prendersi il proprio foglio di stile e formattare con esso il documento. Di default l'attributo media è impostato su all, il foglio di stile collegato o importato è valido cioè per tutti i dispositivi. Ecco un elenco di alcuni possibili valori: screen per i browser web, print per un profilo valido per la stampante, projection per un video proiettore, aural per dispositivi e browser a sintesi vocale, braille per dispositivi basati sul linguaggio braille, tv per le web tv!

Un foglio di stile può essere assegnato a più dispositivi, un elenco dei dispositivi che appartengono a un profilo è ad esempio: media="screen, print, tv" (attributo e valori da aggiungere al tag link).

CSS, aggiungere un foglio di stile al documento

Un foglio di stile può essere interno oppure esterno al documento. Quest'ultima possibilità è quella più seguita dal momento che ci permette di scrivere il foglio di stile con un qualunque editor di testo (anziché scriverlo, come vedremo, all'interno del documento) oppure con un programma ottimizzato come bluefish. L'altra soluzione ci permette invece di risolvere alcuni problemi, ma di questo ne parleremo alla fine. Esistono essenzialmente tre modi per assegnare un foglio di stile a un documento:

Foglio di stile collegato: è possibile indicare al browser che interpreta la pagina HTML il foglio di stile da usare per il documento attraverso il tag link. Tale dichiarazione va fatta all'inizio del documento e quindi all'interno del tag head. Ecco un esempio: link rel="stylesheet" type="text/css" href="./style.css". Alcuni attributi richiesti dal tag sono obbligatori: rel indica la relazione che sussiste tra il documento HTML e il foglio di stile (i possibili valori sono stylesheet e alternate), type indica il tipo di dati che per i fogli di stile è sempre text/css, href indica il path (assoluto o relativo) al foglio di stile. L'attributo media è usato per indicare il supporto (il tipo di dispositivo) a cui applicare il foglio di stile e non è obbligatorio (di default è impostato sul valore all).

Uso di @import: la direttiva @import va usata all'interno del tag style per specificare l'url del foglio di stile:@import url(./style.css);. Attenti al punto e virgola che chiude la dichiarazione!

Fogli di stile incorporati: con il tag style possiamo racchiudere l'intero foglio di stile che scriveremo quindi nella pagina HTML. L'attributo type dice al tag il tipo di stile.

Fogli di stile in linea: le proprietà da assegnare agli elementi possono essere date anche sulla stessa linea che definisce l'elemento nel documento! La sintassi prevede l'elenco di tutte le proprietà da applicare all'elemento separate da un punto e virgola, attraverso l'attributo style.

Tutti questi modi di dichiarare l'uso dei fogli di stile possono spiazzare l'utente. Alcuni modi di inserire i fogli di stile, poi, sembrano nuovamente mischiare l'html e il css. Se in parte questo è vero va subito detto che l'esistenza di certe metodologie per l'inserimento di fogli di stile esiste in verità per risolvere alcuni casi particolari. Di sicuro il metodo più usato è quello che prevede l'uso di un foglio di stile collegato o importato.

Se però vogliamo un determinato stile per un elemento di una precisa pagina ecco allora che l'uso di un foglio di stile in linea risolve il problema. Non abusate di questo concetto, il W3C ha recentemente deprecato l'uso dei fogli di stile in linea.

Va poi detto che i fogli di stile osservano una precisa gerarchia per l'ereditarietà: una proprietà definita nel foglio di stile viene cioè applicata a tutti gli elementi figli a meno di nuove descrizioni che sovrascrivono quindi la proprietà ereditata.

CSS, perché?

L'acronimo CSS sintetizza il termine inglese cascading style sheets, foglio di stile a cascata. Si tratta di un insieme di regole utili alla formattazione di un documento HTML. L'esigenza avvertita dal web designer era quella di separare i contenuti di una pagina web dallo stile di presentazione. Tale esigenza è stata quindi soddisfatta con l'introduzione dei fogli di stile quando l'ente incaricato di creare standard per il web (il world wide web consortium, ovvero W3C) ha realizzato nel 1996 la prima versione della tecnologia CSS.

Il metalinguaggio HTML fin lì usato per la formattazione di documenti per il web era stato usato (ed è tutt'ora usato) impropriamente: nel codice che descrive con i tag gli elementi che compongono una pagina veniva mischiato il contenuto (quindi l'informazione da passare al navigatore che consulta la pagina) alla presentazione (la grafica data alla pagina oppure all'intero sito web).

Questo primo processo per la generazione di pagine web mostra non pochi problemi! Spesso con i tag dell'HTML non si riusciva a descrivere con precisione lo stile da dare ai documenti. In molti (e fra questi, forse, anche il lettore) iniziarono a spaziare gli elementi del documento con numerose immagini trasparenti o comunque invisibili al visitatore. Detto in altre parole si cercava di raggiungere con questi ed altri stratagemmi l'idea affiorata nella testa di come la pagina doveva presentarsi al visitatore. Spesse volte questo comportava molto lavoro e sottraeva, a mio avviso, risorse e tempo da dedicare ai contenuti!

Immaginate poi di voler cambiare la veste grafica di un vecchio documento o sito web, cosa fate? Modificate tutte le pagine allineandole al nuovo stile? Ecco quindi l'importanza di separare i compiti: all'HTML i contenuti, ai CSS lo stile!

Con i fogli di stile possiamo definire: proprietà di formattazione del testo e del documento, spaziare gli elementi tra la loro senza fare cose strane, gestire e definire più set di font e colori per il testo nel documento, applicare sfondi o pattern alle pagine etc... Ho iniziato a rivedere qualche vecchio appunto, credo che vi parlerò di tanto in tanto di questa tecnologia, alla prossima.