Formattazione del testo con CSS

Creiamo ora un primo esempio concreto di foglio di stile sulla scorta delle nozioni di base fin ora acquisite, preoccupiamoci di formattare una serie di testi utilizzando tutti gli attributi di stile dediti allo svolgimento di tali funzioni e tutti i trucchi per snellire il codice ed il lavoro.

La prima cosa che ci preoccupiamo di stabilire per la formattazione di un file testuale è la dimensione del testo, il carattere, ovvero il font da utilizzare ed eventualmente il colore, immaginiamo di voler stilizzare il testo contenuto in un Tag <div>, più frequentemente utilizzato per i CSS rispetto a <p>:

<style type="text/CSS">
   div {
      color: 003366;
      font-size: 12px;
      font-family: Verdana;
   }
</style>

Lì dove tutti gli elementi di testo rispettino un determinato tipo di stilizzazione, conviene stabilire all'interno del body le proprietà, ad esempio:

<style type="text/CSS">
   body {
      color: 003366;
      font-size: 12px;
      font-family: Verdana;
   }
</style>

Prego di prestare attenzione ad un particolare, non a caso ho evidenziato il codice inerente alle dimensioni del testo, lì dove un testo si trova all'interno di una cella di una tabella Html, anche se contenuto in un Tag <div>, le dimensioni del testo non saranno prese in considerazione, visualizzandole di default, è opportuno definire le dimensione dei <td> a parte, la soluzione migliore è questa:

<style type="text/CSS">
   body {
      color: 003366;
      font-family: Verdana;
   }
   td, div { font-size: 12px; }
</style>

Vediamo in questo modo anche come è possibile formattare due elementi contemporaneamente, ovvero col solo utilizzo di una virgola di separazione ed uno spazio opzionale, in questo caso "td, div".

Immaginiamo ora che una singola parola di un testo debba essere scritta in grassetto, con un carattere più grande ed un font diverso, utilizzeremo il Tag <span> che, a differenza del <div> non comporta un ritorno a capo, e gli assegneremo questo stile:

<span style=
"font-size: 15px; font-family: Tahoma; font-weight: Bold;">
lukeonweb.net</span>

Diventa in questo modo addirittura più conveniente utilizzare una formattazione Html semplice, proviamo a riscrivere il tutto:

<span style="font: Bold, 15px, Tahoma;">lukeonweb.net</span>

Nota: nel caso in cui il nome del font che si desidera utilizzare sia composto da più parole, sarà necessario inserirlo per intero tra singoli apici, ad esempio:

<div style="font-family: 'Times New Roman';">lukeonweb.net</div>

Passiamo alla definizione di altri elementi di formattazione da assegnare ad elementi testuali:

• Testo centrato: text-align: Center;

• Colore di sfondo: background-color: #FFFFBB;

• Corsivo: font-style: Italic;

• Sottolineato: text-decoration: Underline; (da utilizzare con moderazione data la somiglianza con i link testuali)

Autore: Luca Ruggiero