Dunque, le istruzioni riguardanti la grafica possono alloggiare sostanzialmente in tre posizioni differenti, all'interno della struttura di markup:
  1. in un file esterno; avremo, quindi, la seguente stringa, posizionata nella <head> del documento, per dire al browser dove andare a pescare il foglio di stile:
    codice:
    <link 
   rel="stylesheet" 
   type="text/css" 
   href="posizione/file.css" />
  2. all'interno del documento stesso, però slegate dal <body>; ecco che si usa il marcatore <style>, posizionandolo nella <head>:
    codice:
    <head>
   

   <style type="text/css"><!--
      /* Qui le varie istruzioni CSS, come quelle d'esempio */
      body
      {
         margin:0;
         font-size:100%;
      }
   --></style>
</head>
  3. sempre all'interno del documento stesso, però direttamente collegate all'elemento che si vuole editare; ora si userà l'attributo style (diverso dall'elemento <style>); per ottenere lo stesso risultato di cui sopra:
    codice:
    <body style="margin:0; font-size:100%">

Tra tutte, proprio quest'ultima opzione è stata deprecata, ciò significa che non va più adottata. Lo scopo della decisione è preciso: si vuole separare il più possibile la struttura delle informazioni dalla sua presentazione visuale.

Detto questo, passiamo all'attributo class: esso è, a tutti gli effetti, uno strumento del markup, non dei fogli di stile, anche se è ad essi che maggiormente si lega. Qual è lo scopo di un linguaggio di marcatura? Attribuire significato alle informazioni [ www.mibmagazine.it/article.php?id=51 ]. Significato, non presentazione.

Prendiamo l'esempio di un catalogo prodotti di un sito di ortofrutta. Questo sito permette di ordinare direttamente on-line la merce, facendosela poi recapitare a casa. Immaginiamo la pagina in cui sono elencati i vari prodotti che il negozio ha attualmente a disposizione; avremo una cosa simile:
codice:
<h2>I prodotti di oggi</h2>
<ul>[*]Pomodori[*]Carote[*]Zucchine[*]Banane[/list]
Ora, immaginiamo che queste scorte siano limitate, quindi che ci sia la possibilità che un utente che entra la sera possa trovare il numero di - diciamo, per esempio - carote esaurito.

Come possiamo, noi che progettiamo la struttura di markup, inserire l'informazione 'prodotto esaurito'? Attraverso le classi, ad esempio:
codice:
<h2>I prodotti di oggi</h2>
<ul>[*]Pomodori
   <li class="esaurito">Carote[*]Zucchine[*]Banane[/list]
Nel nostro foglio di stile potremo poi definire una visualizzazione opportuna per evidenziare la condizione del prodotto. Che so, si potrebbe colorare di rosso, riquadrare e inserire un'icona esplicativa:
codice:
.esaurito
{
   color:red;
   border:1px solid red;
   background:url('icona-esaurito.gif') no-repeat 0 50%;
}
Adesso, qualsiasi elemento della lista che avrà l'attributo class="esaurito" comparirà come abbiamo specificato con i CSS.

Spero di essere stato chiaro.