CSS: cos’è e a cosa serve

CSS è l’acronimo di Cascading Style Sheets, ovvero "fogli di stile a cascata" o, più brevemente, fogli di stile.

Cos’è CSS e a cosa serve

Si tratta del linguaggio standard per la stilizzazione di documenti HTML (ma non solo) che assolve al compito di informare il browser circa l’aspetto da conferire ai vari tag presenti nel documento. Attraverso i CSS è possibile, quindi, definire colori, dimensioni, sfondi e quant’altro riguarda l’aspetto visuale degli elementi presenti nella pagina.

Attraverso i CSS, inoltre, si supplisce ai tradizionali tag di formattazione (come ad esempio il tag <font>) ed a molti attributi (come, ad esempio, "width" o "color") dell’HTML separando, definitivamente, il markup (la definizione della struttura) dall’aspetto più propriamente grafico dell’attività di web design.

Storia dei CSS

La storia dei CSS inizia nel 1996 quando il W3C, al fine di superare conflitti ed incompatibilità tra i diversi browser allora in circolazione, decide di presentare la specifica di un nuovo linguaggio – CSS – con lo scopo dichiarato di separare la struttura di un documento dalla sua formattazione. L’idea di base era quella di delegare ogni aspetto di formattazione ad un nuovo linguaggio le cui istruzioni dovevano collegarsi coi singoli tag HTML della pagina mediante l’indicazione del nome del tag all’interno dello style oppure attraverso l’utilizzo degli attributi ID e class.

La prima versione di CSS (CSS 1) non ebbe un grande successo a causa dello scarso supporto offerto da molti dei browser più diffusi (principalmente Netscape e Internet Explorer). Nell’ottica di potenziare il linguaggio, nel 1998 il W3C emanò le specifiche di CSS 2 ed in seguito, nel 2004 diede inizio ai lavori di CSS 2.1 (lavori terminati nel 2011 con la "promozione" della specifica allo stato di raccomandazione). Ad oggi il supporto di CSS 2.1 è garantito da tutti i browser in circolazione.

Il percorso di sviluppo del linguaggio, ovviamente, non può dirsi concluso con la versione 2.1, tant’è che in questi anni il W3C è al lavoro su una nuova versione del linguaggio – CSS 3 – che propone importanti novità non ancora, purtroppo, recepite e supportate da tutti i browser.

Questa guida ha lo scopo di presentare al lettore le tecniche base dei CSS alla versione 2.1. Per chi desiderasse approfondire le opportunità offerte dalla versione 3 suggeriamo di dare una lettura alla guida apposita presente qui su Mr.Webmaster, avvertendo, ancora una volta, che le nuove proprietà inserite nella v.3 di CSS non possono e non devono essere considerate universali e cross browser come lo sono, invece, le classiche specifiche della v. 2.1.

Conoscere HTML prima di CSS

Una precisazione importante per il lettore che volesse intraprendere lo studio di questo interessante linguaggio: prima di avventurarsi tra le lezioni di questa guida è fondamentale avere una buona padronanza del linguaggio HTML, delle sue caratteristiche e dei suoi tag fondamentali. Se è vero che CSS è il linguaggio di formattazione dell’HTML, lo studio del primo non può certo prescindere da una adeguata conoscenza del secondo.

Formattazione di HTML Vs. CSS

Per far capire subito al lettore quale sia la portata di CSS, credo sia utile un esempio pratico. Si supponga di voler formattare tutti i paragrafi di una pagina HTML applicando a ciascuno un dato font e colore. Per fare ciò utilizzando la "vecchia scuola" che prevede l’utilizzo della formattazione all’interno del HTML, avremmo dovuto scrivere un codice del genere:

<p>
  <font color="#FF0000" size="2" face="Verdana">
  ... paragrafo 1 ...
  </font>
</p>
<p>
  <font color="#FF0000" size="2" face="Verdana">
  ... paragrafo 2 ...
  </font>
</p>
<p>
  <font color="#FF0000" size="2" face="Verdana">
  ... paragrafo 3 ...
  </font>
</p>

Come si può vedere abbiamo dovuto ripetere per tre volte la formattazione del testo mediante altrettanti utilizzi del tag <font>.

Mediante CSS una simile procedura viene superata dalla definizione di una regola di stile unica da applicarsi a tutti i paragrafi di testo presenti nel documento:

<style type="text/css">
p { font-family: verdana; font-size: 14px; color: #FF0000; }
</style>

<p>
  ... paragrafo 1 ...
</p>
<p>
  ... paragrafo 2 ...
</p>
<p>
  ... paragrafo 3 ...
</p>

Non ci si soffermi troppo sull’esempio qui sopra, spiegheremo più avanti nella guida il perchè di questa sintassi, per ora è sufficiente notare come sia cambiato radicalmente il modo di formattare i contenuti in un’ottica, come più volte detto, di netta separazione tra struttura e forma del contenuto.

E’ bene precisare che oltre a permettere una più semplice gestione degli stili, i CSS permettono di effettuare stilizzazioni che col solo HTML risultano impossibili; si pensi, ad esempio, all’effetto rollover su un link, dove il link stesso cambia colore al passaggio del mouse. Ancora i CSS permettono l’interazione con Javascript, per creare stilizzazioni dinamiche in funzione di una serie di eventi altrimenti non gestibili.

Conclusioni

L’utilizzo dei tag e degli attributi di formattazione di HTML è oggi obsoleto ed il loro uso assolutamente deprecabile. Ne consegue che chiunque voglia avventurarsi nella creazione di pagine web DEVE conoscere CSS e la sua sintassi.

Si segnalano, infine, al lettore due link importanti che lo assisteranno nello studio delle lezioni della nostra guida:

• specifiche ufficiali dei CSS: http://www.w3.org/Style/CSS/
• validatore di codice CSS: http://jigsaw.w3.org/css-validator/