I fogli di stile CSS

Il CSS è un linguaggio utilizzato per la formattazione dei siti web e, più in generale, dei documenti HTML, dei documenti XHTML e XML. L'acronimo CSS significa Cascading Style Sheets ossia fogli di stile. Si tratta di un linguaggio di formattazione dei testi che integra il linguaggio HTML.

A cosa serve il CSS?

Il CSS onsente di realizzare effetti altrimenti non possibili con i tag del linguaggio HTML. Col passare del tempo si è sostituito anche ad alcuni tag del linguaggio HTML ( es. font ), in particolar modo a tutti quelli che associano al testo una dimensione e un colore.

Per inserire la formattazione in un documento HTML siamo costretti a inserire numerose volte i tag di formattazione dei caratteri. Ad esempio, nel linguaggio HTML per scrivere con il colore rosso alcune parole in grasseto di un testo, dobbiamo utilizzare il tag FONT ogni volta che ci serve.

questa parola è <b><font color=#FF0000>rossa</font></b>,
anche questa parola è <b><font color=#FF0000>rossa</font></b>

Il precedente codice sorgente viene visualizzato dal browser mettendo in grassetto ( tag B ) le due parole e colorandole di rosso ( tag FONT ). Il risultato è il seguente:

Un esempio di codice HTML con due parole in grassetto di colore rosso

Lo stesso risultato grafico può essere ottenuto definendo un particolare stile del carattere tramite il tag STYLE nella sezione HEAD del documento HTML, detto foglio di stile ( CSS ).

In questo modo possiamo eliminare le ridondanze dei tag HTML e, all'occorrenza, possiamo anche modificare lo stile dei caratteri su tutte le pagine del sito web con una sola operazione.

Un esempio pratico

Nel seguente esempio CSS associamo il colore rosso ( #FF0000 ) su tutte le parole in grassetto ( tag <b> ) del documento HTTML.

<html>
<head>
<style type="text/css">
b { color: #FF0000; }
</style>
</head>
<body>
questa parola è in <b>grassetto</b>
</body>
</html>

In pratica, con questa semplice regola di stile diciamo al browser di adottare automaticamente il colore rosso ( #FF0000 ) ogni volta che incontra una parola in grassetto, ossia ogni volta che incontra una parola compresa tra i tag <b>

In questo modo evitiamo di dover definire manualmente il colore rosso con il linguaggio HTML ( tag <font> ) su ogni parola in grassetto del documento HTML. In questo modo possiamo omettere di scrivere nel codice sorgente il tag <font>.

<b>questa parola è in<font color=#FF0000>grassetto</font></b>

Quando si utilizza il CSS è sufficiente scrivere il tag <b>. La regola del foglio di stile visualizza automaticamente la parola in grassetto con il colore rosso.

questa parola è <b>rossa</b>,
anche questa parola è <b>rossa</b>

Grazie allo stile CSS otteniamo a video il medesimo risultato di prima, utilizzando però una minore quantità di codice sorgente. Il vantaggio è tanto maggiore, quante più parole rosse ci sono nel testo.

Un esempio di codice HTML con due parole in grassetto di colore rosso

E' soltanto un semplice esempio per comprendere la funzionalità del linguaggio. Il CSS è un linguaggio di formattazione molto potente che ci consente di eliminare quasi del tutto l'uso dei tag html. Il CSS è una pratica di buona programmazione che non sostituisce il documento HTML ma lo affianca.

Nel documento HTML sono presenti i contenuti testuali veri e propri mentre nel foglio di stile sono concentrate le regole di formattazione grafica ossia come si dovranno vedere i testi sullo schermo dell'utente.

Quando viene utilizzato per la prima volta il CSS?

Il primo CSS venne introdotto nel 1996 ( CSS 1 ) come tentativo di adottare uno standard di formattazione tra i diversi browser, ognuno dei quali seguiva delle proprie regole di interpretazione del linguaggio HTML. Il CSS riscosse immediatamente un gran successo e nel 1998 vennero coniate dal W3C le specifiche del CSS 2, a cui seguirono nel 2004 quelle del CSS 2.1.

Il foglio di stile interno o esterno?

Il foglio di stile CSS può essere integrato direttamente nel codice sorgente del documento HTML all'interno del tag STYLE, come nell'esempio precedente, oppure può essere scritto su un file esterno con estensione .css che viene richiamato dal documento HTML.

<link rel="stylesheet" href="/file-esterno.css" type="text/css">

Un esempio di codice CSS che consente di personalizzare il tipo di carattere di un documento, il colore, lo sfondo della pagina ( tag BODY ) e la formattazione dei principali tag header del documento ( H1, H2, H3 ) è il seguente:

esempio di codice CSS

L'uso di un file esterno per definire il foglio di stile CSS è generalmente la strada migliore perché permette di ridurre il peso del documento HTML e, indirettamente, di aumentare la velocità di scaricamento e di visualizzazione della pagina sul web.

Quando il foglio di stile è un file esterno, quest'ultimo resta nella memoria cache del browser e non viene scaricato ogni volta che l'utente cambia la pagina di lettura sullo stesso sito web. In pratica, viene scaricato soltanto con la prima pagina che l'utente legge su un sito web ma non anche nella seconda, terza, quarta pagina e così via. Un bel vantaggio...

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Libri di approfondimento
  1. Cos'è il CSS