Vediamo ora il codice - assolutamente equivalente per quanto riguarda la resa visuale sui browser più diffusi - utilizzato per la versione alternativa del menu di navigazione, basata sull'uso di XHTML e di CSS Level 2 (I frammenti di codice esaminati nel seguito sono tratti dal file cssforma.htm. Il listato integrale di questo file è riportato in cssforma-l.htm).
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio di impaginazione realizzato tramite CSS2</title>
<link rel="stylesheet" type="text/css" href="stile1.css" />
</head>
<body>
<div id="corpo">
<div id="corposin">
<div class="capo">Menu di navigazione</div>
<div class="menu1"><a href="cssforma.htm">Voce di menu n.01</a></div>
<div class="menu2"><a href="cssforma.htm">Voce di menu n.02</a></div>
[...]
<div class="menu1"><a href="cssforma.htm">Voce di menu n.11</a></div>
<div class="menu2"><a href="cssforma.htm">Voce di menu n.12</a></div>
</div>
</div>
</body>
</html>
La prima cosa che salta all'occhio è che la quantità di codice necessaria per specificare le singole voci di menu è in questo caso notevolmente inferiore rispetto a quella utilizzata nell'esempio precedente, in cui la presentazione visuale del documento veniva determinata tramite elementi e attributi di presentazione dell'HTML.
Il breve blocco di codice riportato alla fine di questo paragrafo riproduce quella stessa voce di menu che avevamo visto in precedenza realizzata tramite un HTML presentazionale. Come si può notare analizzandolo, non vi è più nulla che faccia riferimento ad aspetti di presentazione. Vi è solo il testo del collegamento, racchiuso nell'elemento A (che serve per specificare la destinazione del collegamento). Il tutto poi è a sua volta racchiuso nell'elemento DIV, che - come è spiegato nelle specifiche HTML 4.01 - serve da contenitore generico di lingua e/o stile.
<div class="menu2">
<a href="cssforma.htm">Voce di menu n.02</a>
</div>
L'elemento <div> è qui utilizzato appunto come contenitore di un blocco caratterizzato da uno stile omogeneo - il box che racchiude la voce di menu n.2 - . In questo esempio lo stile viene agganciato al blocco per mezzo dell'attributo "class", che richiama uno stile chiamato "menu2".
Ed ecco di seguito le caratteristiche di presentazione specificate da "menu2" (questo stile, insieme a tutti gli altri utilizzati nel documento, è contenuto nel file esterno collegato "stile1.css"):
.menu2 {
background-color:#fff;
padding:5px;
font-family:Tahoma,arial;
font-weight:bold;
font-size:80%;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080
}
È bene precisare che le proprietà di stile definite da "menu2" valgono per tutti i blocchi collegati a questa classe. Con un'unica definzione di stile, è possibile cioè specificare le caratteristiche di presentazione di un qualsivoglia numero di elementi: nel nostro esempio, i blocchi collegati a "menu2" sono sei, ma potrebbero essere molti di più.
È importante dunque la seguente considerazione: quanti più sono gli elementi di una pagina o, meglio ancora, di un intero sito modificati da una regola di stile, tanto più diventa consistente il vantaggio di definire la presentazione nel modo sintetico reso possibile dai CSS, piuttosto che ricorrendo di continuo, per ogni pagina, alla ripetizione degli stessi elementi e attributi di presentazione.
