Ora che hai imparato ad usare l'HTML dovresti anche aver capito i suoi vantaggi e i suoi limiti. Oggi vedremo insieme come porre rimedio ai limiti. Su HTML.it esiste una validissima guida ai CSS. Qui cercheremo di analizzare insieme gli aspetti concettuali sui quali si basa l'intera struttura dei CSS.
Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero di utenti. Col passare del tempo il web si è diffuso a macchia d'olio, gli utenti sono diventati moltissimi, e i designer hanno cominciato a curare l'aspetto comunicativo delle pagine e a preoccuparsi anche della loro presentazione grafica. È in questo momento che si scoprono tutti i problemi legati allo HTML e soprattutto alla sua gestione, i web designers si sono visti costretti ad aggirare i limiti stilistici che pone lo HTML scontrandosi però con nuovi problemi.
Vediamo quali sono i limiti pratici principali:
- conversione del testo in immagini
- uso di immagini per il controllo dello spazio bianco
- uso di tabelle per l'impaginazione
- scrittura di programmi in sostituzione dello HTML
- difficile gestione degli aggiornamenti
- modifiche da effettuare sui singoli file
Abbiamo già avuto modo di vedere che le conoscenze che hai acquisito fino ad ora rendono molto complesse le pagine web, che sono poco flessibili e soprattutto creano barriere agli utenti disabili (pensiamo ai frame).
I Cascade Style Sheets, che in italiano significa Fogli di stile a cascata, risolvono gran parte dei problemi di gestione e organizzazione delle pagine web.
Il vantaggio fondamentale che offrono i fogli di stile rispetto allo HTML è il controllo dello stile delle pagine web attraverso la separazione tra contenuti, struttura e stile.
I fogli di stile ti permettono di specificare in modo semplice la spaziatura delle righe, i rientri, i colori usati per il testo e gli sfondi, il corpo e lo stile dei caratteri e una moltitudine di altri dettagli.
Vediamo la gestione di una riga di testo attraverso lo HTML:
<font face=VERDANA size=2 COLOR=BLACK>questo è un testo</font>
Attraverso questa riga di codice noi diciamo al browser di far visualizzare la scritta "questo è un testo" con un font Verdana di dimensioni 2 e di colore nero. Il testo e lo stile (font, dimensione e colore) con cui deve essere visualizzato sono uniti in un'unica riga di codice. Cosa succederebbe se dovessi cambiare il font di tutte le pagine del tuo sito, magari composto da più di 100 pagine? Dovresti aprire tutti i file e modificali uno ad uno.
I fogli di stile, ti risolvono il problema perché separano lo stile dal contenuto
.
Purtroppo uno dei limiti dei fogli di stile è che non sono compatibili con tutti browser nonostante siano stati approvati da il W3C. I browser che offrono la maggiore compatibilità sono Explorer (dalla versione 5.5) e Mozilla (ossia Netscape 7). Netscape 4 ha seri problemi di gestione dei CSS.