"Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents."
˜ www.w3.org
CSS, Fogli di stile a Cascata, è un semplice meccanismo per aggiungere stile (come ad esempio fonts, colori, spaziatura) ai documenti web.
˜ www.w3.org
Iniziamo dal perché mai dovremmo far uso dei fogli di stile.
Perché con l'avvento dei browsers standard-compliant (browsers disponibili allo standard) come Internet Explorer 5+, Netscape 6x, Opera e Mozilla-Firefox i webmasters possono finalmente fare uso dei fogli di stile al posto delle antiquate tabelle (che servono solo in caso di database e usandole rispettando, anche qui, le regole di scrittura).
Questo ci permette di dividere il contenuto della pagina dalla sua rappresentazione grafica e tipografica, lo snellimento (in termini di peso) della stessa, una maggiore flessibilità e la possibilità ergonomica di cambiare su centinaia di pagine un qualche parametro con un solo comando visto che lo stile è composto da un solo file (provate a immaginare che le parole che avete voluto evidenziare in rosso le volete cambiare in verde e non fate uso di un foglio di stile: dovrete farlo a mano in ogni pagina).
Ci permette inoltre di essere più vicini ai portatori di varie tipologie di handicap visto che le nostre pagine offrono solo testo e i tags di comando sono racchiusi (chiusi per meglio dire) nel pieno rispetto dei dettami del W3C.
Potrete far uso di sfondi bellissimi che adesso non potete nemmeno immaginare e decidere dove e come devono apparire, potrete decidere voi lo spazio di interlinea come un vero e proprio giornale, potrete decidere se il testo lo volete a destra, a sinistra o giustificato... ma, soprattutto, se mi seguirete in questa avventura vi troverete in quello che sarà il futuro del web e non vi farete cogliere impreparati.
Personalmente le mie pagine le scrivo con un semplice editore gratuito di testo (
EditPad, che caldamente vi consiglio) e scrivo direttamente i tags e i comandi che mi necessitano.Mi rendo conto che per molti di voi questo non è possibile e che fate uso di programmi "dedicati" ma siccome anche questi si sono aggiornati e vi permettono di far uso dei fogli di stile spero che quello che leggerete su queste pagine vi aiuterà a comprederne il meccanismo.
Le pagine che andremo a costruire saranno valide come Xhtml 1.1, valide nel loro foglio di stile (CSS versione 2), liquide (liquid) e cioè con un layout flessibile che accetta e segue la finestra del browser se questo si espande o contrae (questa pagina che state leggendo la vedono sia coloro che fanno uso di uno schermo 640 × 480 o 800 × 600 sia quelli che ormai fanno uso del moderno 1024 × 768) e, come dicevo, costruite senza tabelle (tables).
Osservate questa pagina: il testo parte da sinistra ma non si pone sopra allo sfondo del libro.
Non ho dovuto far uso di gif trasparenti come si faceva una volta per crearmi lo spazio necessario; mi è semplicemente bastato scrivere nel foglio di stile questo: margin: 50px; che sono i pixel che bastano ad ottenere quello che mi serve.
E se un domani decido che voglio andare più verso il centro pagina? Al posto di 50px andrò a scrivere, per esempio, margin: 60px; e tutte le pagine, in un sol colpo, saranno modificate.
Va detto, a proposito, che il foglio di stile ha dei suoi "paletti" e va scritto seguendo i dettami, ancora una volta, del W3C.
E i costruttori di browsers, che per anni si sono fatti una inutile guerra costruendo i loro programmi come se il web fosse cosa loro e non universale, solo adesso stanno correndo ai ripari per cui vi consiglio di scaricare sempre la nuova versione del vostro browser perché non è detto che voi vediate le stesse cose che vede un'altro.
Un esempio: a fondo di questa pagina c'è il link per poter tornare in alto senza dover scorrere tutta la pagina col mouse; bene coloro che attualmente (maggio 2005) fanno uso di Internet Explorer vedrebbero anche il simbolo di pagina già letta che ho messo per facilitarvi nel riconoscerle a colpo d'occhio. E questo simbolo qui io non lo voglio perché è ridicolo quindi ho messo il comando per non mostrarlo ma... ma... mentre chi fa uso, ad esempio, di Mozilla-Firefox non lo vede come io ho scritto nel foglio di stile.
E allora sono dovuto ricorrere ad un "trucchetto".
Come si ottengono queste meraviglie del foglio di stile?
Passiamo allora dal "perché fare uso dei fogli di stile" al "come si usano i fogli di stile".
I browsers di nuova generazione, come dicevo, comprendono finalmente (su questo finalmente ne parlerò in altra pagina) i fogli di stile o css e, quindi, non appena noi navigando nel web andiamo su un sito che fa uso del css il browser andrà a leggerlo e poi ci mostrerà la pagina così come l'ha ideata il suo creatore.
E più lui sarà stato preciso nello scrivere il suo foglio di stile (mai essere precipitosi!) e più noi andremo a "goderci" una pagina ben fatta, che si carica velocemente (visto che il browser non deve correggere gli e/orrori scritti - non lo sapevate questo, eh?) e che, ma guarda tu, piace tanto ai motori di ricerca (non per caso adesso mi stai leggendo).
Bene, detto questo passiamo alla parte pratica.
Nel nostro sito (quindi prima nel computer dove lavoriamo e poi nel server che ci ospita) creiamo una directory chiamandola css dove andremo a mettere il foglio di stile e all'inizio delle nostre pagine fra il tag
head di apertura e quello /head di chiusura metteremo questo comando per i browsers:<style type="text/css" media="screen">@import url("css/miostile.css");</style>
dove "miostile" lo potete chiamare come più vi aggrada, l'importante è che rimanga il .css e lo slash (potete guardare come ho fatto io per questa pagina leggendo l'Xhtml) visto che css è il nome della directory e lo slash serve a dirgli cosa deve leggere lì dentro.
Tutto qui? Sì tutto qui.
Per iniziare, difatti, potrete far uso dei fogli di stile e pagine master che via via metterò qui nella sezione dedicata al download; questo vi permetterà di familiarizzare con i css e via via, prendendo confidenza con gli stessi, incominciare a fare dei vostri cambiamenti per poi un domani, ve lo auguro con tutto il cuore, spiccare il volo per un foglio di stile tutto vostro.
In seguito vi spiegherò cosa fare per creare un foglio di stile per la stampante in modo da dare la possibilità a quelli che vi leggono di stampare solo il corpo della pagina (quella dove c'è la "ciccia" come dico io) senza dover stampare le grafiche e i menu che a loro certo non interessano.
Provate a vedere col vostro browser l'anteprima di stampa di questa pagina: questa ulteriore "meraviglia" si ottiene di nuovo grazie al foglio di stile e pensate che anni fa in internet si vendevano programmi per fare questo e a cifre considerevoli (e qualcuno ancora li compra, beata ignoranza).
