Dal punto di vista dell’interfaccia utente, una prima esigenza estremamente sentita è quello di portare sul Web le capacità di impostazione dei documenti attualmente presenti nei software per l’elaborazione testi per poter trasformare il Web in uno strumento evoluto di publishing.

Nelle funzionalità iniziali dell’HTML, infatti, il tipo di carattere associato ai tag con i quali viene marcato il testo (H1, H2, …) è predefinito (font Times, dimensioni e colori predefiniti). Anche con l’introduzione del tag font, che permette di definire queste caratteristiche, tali impostazioni rimangono locali al testo che si sta formattando, senza poter definire delle caratteristiche globali del documento.

In un qualsiasi programma di elaborazione testi, invece, tali impostazioni sono possibili, come del resto è possibile gestire altre caratteristiche del documento, come allineamenti, rientri, spaziature, ecc.

Figura 40: definizione di uno stile

Per superare queste limitazioni, nel Web sono stati introdotti i fogli di stile (Cascading Style Sheets: CSS) [CSS]. Un CSS è una definizione di elementi tipografici associati a tag sia preesistenti in HTML (es.: H1, P, …), sia definiti dall’autore (es.: <sottotitolo>).

Questa definizione è tipicamente contenuta in un file esterno alle pagine HTML, in modo da poter utilizzarne le definizioni per un gruppo omogeneo di pagine. Il richiamo al file di stile avviene tramite il tag link incluso nell’head della pagina. Ad esempio, salvando lo stile in un file con nome "stile.css", il tag da inserire nell’intestazione della pagina avrà il formato:

<link rel="stylesheet" href="stile.css" type="text/css">

Un file di stile, poi, potrebbe contenere definizioni del tipo:

<style TYPE="text/css">

<!--

BODY {color: #ffffff}

H1 {font-family: arial; font-size: 14pt; font-weight: bold}

SOTTOTITOLO { font-family: arial; font-size: 10pt}

P {font-family: arial}

-->

</style>

Questo farà si che la pagina HTML verrà visualizzata non più su sfondo grigio, ma su sfondo bianco. Inoltre, il font Times dei testi marcati come H1 e P sarà sostituito da font Arial.

Ovviamente, questa esemplificazione è riduttiva delle potenzialità dei CSS, che invece permettono di definire la struttura della pagina, agendo su una molte delle proprietà che la compongono [LIE]. E’ importante, però, evidenziare due innovazioni architetturali legati alla introduzione dei CSS:

1. c’è la possibilità di modificare la struttura standard di un documento HTML introducendo tag "personali";
2. si recupera la distinzione tra struttura del documento (uso dei tag all’interno della pagina) e visualizzazione (vedi par. 1.2.6): infatti, tag differenti possono avere la stessa visualizzazione, ma permettono di evidenziare porzioni distinte del documento ad uso, ad esempio, dei motori di ricerca.

Questa evoluzione troverà maggiore spazio ed organicità con l’introduzione dell’XML.