14221 Letture

Web design: corso rapido per lavorare con i file CSS / prima puntata

I Cascading Style Sheets (abbreviato CSS) offrono la possibilità, come noto, di assumere massimo controllo sulle pagine web che si desiderano realizzare. Ricorrendo ai CSS si può libramente impostare il "look" di una pagina sistemando ogni elemento con estrema precisione, creare colonne, zone nelle quali inserire particolari testi e così via.

Si chiama stile una particolare regola che permette di stabilire in che modo si intende "formattare" una pagina web; un foglio di stile è semplicemente un insieme di questi stili. I CSS vengono utilizzati accanto alle classiche tag HTML e permettono di fare in modo che queste ultime siano visualizzate in maniera accattivante, coerentemente alle esigenze ed agli obiettivi del web designer.

Nell'attesa che vengano formalizzate le specifiche di HTML5, è possibile utilizzare – in accoppiata con i CSS – i linguaggi HTML 4.01 oppure XHTML 1.0. Quest'ultimo è sempre più utilizzato nella produzione di pagine web: può essere pensato come una versione migliorata dell'HTML originario che pone alcuni limiti, ad esempio, sulle modalità con le quali vengono scritte le varie tag.
Quando si utilizza XHTML si debbono tenere a mente alcune regole fondamentali:


La pagina web deve iniziare con la dichiarazione DOCTYPE.
Ecco un esempio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le tag e i relativi attributi debbono essere sempre digitati utilizzando caratteri minuscoli.

Tutte le tag devono essere sempre chiuse. Per creare un paragrafo in XHTML, ad esempio, questo deve iniziare con <p> e chiudersi obbligatoriamente con </p>. Ovviamente, ci sono tag che non necessitano della chiusura: è il caso di <br /> che permette di andare a capo.

Gli attributi per le varie tag devono essere sempre racchiusi tra un doppio apice. Ad esempio, l'indirizzo verso il quale punta una tag anchor deve essere indicato nel modo seguente: <a href="http://www.ilsoftware.it"> e non <a href=http://www.ilsoftware.it>.

Il futuro del web sarà HTML5 ma, sintanto che le specifiche del linguaggio non saranno ufficializzate, è possibile continuare a lavorare con HTML o XHTML certi che saranno entrambi supportati dai vari browser web in circolazione ancora per molti anni.

I software necessari

Per realizzare pagine web contenenti HTML/XHTML e CSS è necessario munirsi solamente di un editor di testo. Notepad++ (scaricabile gratuitamente da questa scheda) è un eccellente programma per i sistemi operativi Windows distribuito sotto licenza GNU GPL. Tra le sue peculiarità principali ricordiamo l'abilità nell'evidenziare la sintassi dei linguaggi di programmazione e nel colorare le tag HTML oltre agli elementi propri dei CSS.
Notepad++ è disponibile anche in versione "portabile" che non necessita dell'avvio di alcuna procedura d'installazione. Questo file compresso contiene due directory: la cartella denominata ansi contiene la versione destinata ai sistemi operativi Windows più vecchi (Windows 98/ME) mentre la unicode può essere impiegata su tutte le altre piattaforme del colosso di Redmond.

Come si presentano i CSS

Similmente a quanto accade per qualunque software, anche i CSS subiscono modifiche e migliorie nel corso del tempo. La prima versione dei CSS fu introdotta nell'ormai lontano 1996 ed ancora oggi la struttura di base di uno stile, gran parte delle proprietà ed alcuni concetti fondamentali sono sempre utilizzati. Con il rilascio delle specifiche dei CSS 2.0, sono state aggiunte nuove "funzionalità" come, ad esempio, la possibilità di creare fogli di stile capaci di essere sfruttati senza problemi su molteplici monitor e dispositivi. CSS 2.0, inoltre, offre la possibilità di posizionare in modo preciso qualunque elemento sulla pagina web.
CSS 2.1, lo standard oggi universalmente accettato, aggiunge diverse nuove proprietà e corregge alcune problematiche introdotte nella versione precedente.
Dietro l'angolo è ormai CSS 3.0: sebbene il W3C non lo abbia ancora definito in maniera ufficiale, alcuni browser web già hanno iniziato ad abbracciare alcune delle nuove specifiche. Alcuni browser già oggi consentono, ad esempio, di inserire più immagini come sfondo per un unico elemento: si tratta di una possibilità introdotta appunto dai CSS 3.0.
Un buon sito web che permette di aggiornarsi sullo stato di avanzamento di CSS 3.0 è css3.info.

I vantaggi derivanti dall'uso dei CSS

Facendo uso dei CSS ci si potranno mettere alle spalle tag (primo tra tutti, il superatissimo tag <font>) che hanno fatto la storia del web, almeno negli anni '90. I CSS consentono di raggiungere il risultato visuale desiderato in meno tempo e con minor sforzo: il numero di righe da scrivere per arrivare ad ottenere un prodotto (migliore) rispetto a quello "generabile" usando solo HTML è nettamente inferiore. Come conseguenza, anche la pagina web si caricherà in modo più rapido ossia avrà un "peso" minore.

Predisporre il codice HTML per l'uso dei CSS

Quando si lavora con i CSS è bene focalizzarsi sull'uso di alcune tag di importanza cruciale: <h1> consente di inserire, nella pagina web, il contenuto che si ritiene più importante. E' possibile pensarlo come un "titolo" che necessita della visibilità maggiore. Le altre tag "header" (ad esempio, <h2>, <h3>) permettono di suddividere il contenuto in più sottosezioni, di importanza minore, ma pur sempre correlate.
Le tag <div> e <span> sono dei "vassoi" vuoti da riempire con i contenuti desiderati. Il <div> è un "blocco" ovvero introduce un accapo sia prima che dopo la tag mentre <span> appare sulla stessa riga, ad esempio come parte di un paragrafo.
La tag <div> viene impiegata per raggruppare un numero variabile di elementi, tutti ricompresi al suo interno: ricorrendo all'utilizzo dei CSS sarà possibile posizionare i blocchi esattamente nelle posizioni desiderate.


Come suggerimento generale, è bene ricordare di non abusare dei blocchi <div>. Alcune tag potrebbero essere spesso più appropriate: si pensi, ad esempio, alla realizzazione di una barra di navigazione. Piuttosto che ad un blocco < div> si potrebbe ricorrere ad una semplice lista puntata (<ul>): in fondo, una barra di navigazione non è altro che una successione di link.

Utilizzando i CSS si dovranno "dimenticare" tag quali <font>, <b> o <i>. Nel caso in cui si volesse davvero evidenziare una parola od una frase si impiegherà la tag <strong> oppure, per usare un'enfasi minore, la tag <em> (i browser visualizzano in corsivo il contenuto di questa tag).
Da evitare l'uso di <table> e l'aggiunta di attributi accessori all'interno della tag <body> (ad esempio quelli che permettono di impostare un colore od una immagine di sfondo, il "look" dei link ipertestuali e così via). Lavorando con i CSS si dovranno inoltre gettare nel cestino tutti gli attributi per l'impostazione e la regolazione dei margini.


  1. Avatar
    drman
    24/04/2012 13:50:17
    Verso la fine della prima parte dell'articolo dici "da evitare l'uso di <table>". Credo tu intenda in riferimento all'uso di table per strutturare graficamente una pagina perchè non mi risulta alcun limite all'uso di table per rappresentare dei dati in forma tabellare appunto.
  2. Avatar
    ferdykun
    24/11/2010 11:38:08
    Ciao, mi è piaciuto questo corso introduttivo, mi sto rinfrescando la memoria e ho imparato alcune cose che non capivo... grazie aspetto la prossima lezione :approvato:
Web design: corso rapido per lavorare con i file CSS / prima puntata - IlSoftware.it