Come fare un sito web in CSS

Un sito web può essere costruito in vari modi, si può utilizzare il linguaggio HTML standard come si faceva una volta, oppure usare i fogli di stile CSS.

Cos'è il CSS?

Il Cascading Style Sheets ( CSS ) è un linguaggio informatico creato per migliorare le potenzialità dei documenti HTML, ossia delle pagine HTML di cui è composto un sito web. Il foglio di stile ti permette di ridurre la quantità dei tag. Il CSS è utile per separare i contenuti del sito dall'aspetto grafico e funzionale della formattazione, riducendo al minimo le duplicazioni e le ridondanze.

Un esempio di sito in HTML

Per capire com'è fatto un sito web in CSS credo sia opportuno partire dal vecchio codice HTML. Alla fine degli anni novanta un sito web era costruito esclusivamente facendo ricorso ai tag del linguaggio HTML e la suddivisione delle zone del sito era realizzata tramite il tag delle tabelle ( TABLE ) e i vari tag di formattazione ( FONT, P, ecc ). Il codice HTML di un vecchio sito web si presenta in questo modo:

Si può ottenere lo stesso risultato sostituendo tutte le tabelle con un foglio di stile CSS. Per semplicità in questa spiegazione farò riferimento a un foglio di stile interno, ossia presente nella pagina, in quanto è il modo più semplice per iniziare a conoscere questo linguaggio informatico .

Come sviluppare il sito in CSS

La prima cosa da fare per trasformare il documento è sostituire le tabelle ( TABLE ), le righe ( TR ) e le colonne ( TD ) con il tag DIV.

Cos'è l'elemento DIV? L'elemento DIV è un tag HTML che indica un blocco del documento HTML, una singola parte della struttura, e che consente di costruire la struttura generale del documento senza considerare il contenuto ( testi, immagini, ecc. ). Ogni DIV ha un nome.

Quello che segue è un esempio di documento HTML che richiama le istruzioni di un foglio di stile realizzato in CSS. Nell'esempio ho sostituito le tabelle con quattro stili distinti ( pagina, testata, corpo e piedipagina ).

Come si può notare, ora il codice sorgente del documento è molto più leggero. Ha un minore numero di tag rispetto a quello in HTML puro e la struttura è facilmente comprensibile anche a occhio nudo.

Definire le caratteristiche degli stili

Il lavoro però non è finito, ora occorre costruire il foglio di stile CSS. Ad esempio, leggendo questo documento il browser non saprebbe qual è la larghezza della pagina ( 900px ). Nel codice HTML standard la larghezza era indicata in ogni tabella. Nel caso del CSS, invece, si deve ragionare in modo diverso.

Supponiamo che l'intero documento sia un foglio sul quale si debba disegnare il sito. Nel precedente esempio il DIV di colore blu ( id=pagina ) racchiude tutti gli altri ed è una sorta di contenitore.

Possiamo assegnare allo stile "pagina" la larghezza di 900 px ( pixel ) modificando l'attributo WIDTH foglio CSS. A questo punto non è più necessario indicare la larghezza in pixel degli altri blocchi, è sufficiente assegnare a tutti i blocchi interni ( testata, corpo e pie di pagina ) una larghezza relativa pari al 100%. In questo modo, il browser applica a tutti i blocchi la larghezza di quello che li contiene ( pagina ) ossia 900 pixel.

Fin qui è stato abbastanza facile da capire ma non abbiamo ancora finito. Nel sito web in HTML la parte centrale è suddivisa in due colonne, una dedicata all'articolo e una dedicata al menù laterale. Nel sito web in CSS le colonne sono state sostituite con i tag DIV articolo e laterale.

Dobbiamo far capire al browser che si tratta di due blocchi da affiancare l'uno all'altro. Se omettiamo questa informazione il browser li visualizza l'uno sopra l'altro.

Come creare due colonne nella pagina

Per far visualizzare il blocco dell'articolo a sinistra e quello del menù a destra si può utilizzare l'attributo FLOAT nel foglio di stile, assegnando il valore left ( sinistra ) al Div dell'articolo e il valore right ( destra ) al Div del menù.

Così facendo, i due blocchi sono visualizzati dal browser come colonne. Oltre a questo occorre indicare la larghezza di ciascuno di essi in pixel o in percentuale tramite l'attributo WIDTH. Ad esempio, si può assegnare una larghezza di 600 pixel al Div dell'articolo e 300 pixel al Div del menù laterale.

Come si può notare, ho aggiunto anche un terzo Div, uno in più rispetto al previsto. Si tratta del div #corpofine. Perché l'ho fatto? Si tratta di un blocco di chiusura. I due blocchi #articolo e #laterale hanno un allineamento a sinistra e a destra. Per evitare che l'allineamento coinvolga anche i blocchi successivi, ho inserito un tag vuoto con l'attributo clear:both. È una tecnica per dire al browser di andare a capo.

Salvare il file del foglio di stile con estensione .css

Giunti a questo punto possiamo salvare il foglio di stile in un file con estensione CSS. Per scrivere un foglio di stile non occorre disporre di software particolari, si può usare anche con un comune editor di testi. Ad esempio, il programma Blocco Note del sistema operativo Windows.

Io ho deciso di salvare il file con il nome fogliodistile1.css ma si può utilizzare qualsiasi altro nome, purché il file abbia l'estensione .css.

Richiamare il foglio di stile dal documento HTML

L'ultima operazione da fare è indicare al file HTML di utilizzare questo foglio di stile, indicando il nome del file esterno CSS nel meta tag link stylesheet del documento HTML.

Anche il file del documento HTML ora è completo. Fatta questa modifica si può salvarlo dandogli il nome che si preferisce, purché abbia un'estensione .htm. In questo esempio, io ho salvato il file del documento con il nome documento1.htm.

Come funziona il sito web in CSS

In conclusione, abbiamo creato due file, uno con in cui sono presenti i contenuti testuali e multimediali ( documento1.htm ) e un altro in cui sono elencati gli elementi grafici e di formattazione ( fogliodistile1.css ).

Quando il browser apre il documento HTML ( documento1.htm ), quest'ultimo gli fornisce i contenuti testuali e l'indirizzo del foglio di stile ( fogliodistile1.css ). Il browser unisce i due file e organizza le informazioni sullo schermo dell'utente. Il risultato finale è un sito web con una struttura simile a quella nella seguente figura:

Spero che questo tutorial sia utile per comprendere qualcosa in più sul funzionamento del linguaggio CSS e sulle tecniche per realizzare un sito web i fogli di stile.