Iniziamo subito a vedere gli attributi dei fogli di stile per il testo.

• Innanzitutto possiamo scegliere con font-family il tipo di carattere e la famiglia; ad esempio scriviamo:
  { font-family: times, garamond, serif }
  In questo caso diciamo di voler utilizzare il carattere times, nel caso non venga trovato si può invece usare il garamond; nel caso neanche questo fosse presente nel computer che carica la pagina web si carica un qualsiasi font della famiglia serif.
  
• Possiamo poi settare con font-size l'altezza del font.
  Le possibili unità di misura soddisfano le necessità di tutti i progettisti e sono: punti, pollici, centimetri, ems, pixel e percentuale rispetto al font di default.
  Ad esempio per utilizzare un font alto mezzo pollice:
  { font-size: .5in }
  mentre per un font di 14 punti:
  { font-size: 14pt }
  mentre per un font di 2 centimetri:
  { font-size: 2cm }
  mentre per un font di 30 pixel:
  { font-size: 30px }
  mentre per un font alto il 30% del font di default:
  { font-size: 30% }

• Per settare lo stile in italico, utilizzare il seguente costrutto:
  { font-style: italic }
  Le altre opzioni disponibili sono normal e oblique, attualmente manca un modo per settare il testo in grassetto. Sperimentate voi l'effetto di oblique ( non posso mica dirvi tutto, fate anche voi la parte di bravi studenti ! ).
  
• Per settare lo spessore ( peso ) del font, utilizzare font-weight. Le opzioni possibili oltre a normal e in ordine di peso crescente sono: extra-light, demi-light, light, medium, bold, demi-bold ed extra-bold. Il peso è specificabile anche numericamente, l'opzione di default normal corrisponde ad un peso di 400, mentre bold a 700.
  
• Per decorare il testo, si può utilizzare text-decoration e con le opzioni seguenti: none, underline, overline, blink, italic e line-through. Se si specifica none come opzione, succede ad esempio che i collegamenti ( link ) non vengono più visualizzati in sottolineato.
  
• Per impostare l'interlinea si può utilizzare l'attributo line-height; le opzioni possibili sono da specificare numericamente in pixel, centimetri, punti, pollici, ems o percentuale, esattamente come per font-size.
  
• Per applicare delle trasformazioni al testo utilizzare text-transform; le opzioni possibili sono: capitalize, uppercase, lowercase e none. Con capitalize, si trasforma in maiuscolo la prima lettera di ogni parola.

• Per settare il colore, utilizzare color: #RRGGBB, dove RRGGBB è la terna esadecimale che identifica il colore, oppure color: nomeColore. In questo caso nomeColore può assumere i seguenti valori: white, gray, black, silver, red, green, blu, maroon, purple, fuchsia, lime, olive, yellow, navy, teal e aqua ( i 16 colori di base )

Vediamo ora gli attributi dei fogli di stile per settare margini e rientri.

• Per settare i margini utilizzare gli attributi margin-left, margin-top, margin-right; questi sono rispettivamente quello sinistro, quello superiore e quello destro. I valori da utilizzare sono numerici con le solite unità di misura già viste: px, pt, in, cm, %, ems...
  
• Per settare il rientro del testo utilizzare l'attributo text-indent; i valori numerici da utilizzare sono espressi con le solite unità di misura.

• Per settare l'allineamento, utilizzare text-align; le possibili opzioni sono left, center e right.

Per settare i colori e lo sfondo si possono utilizzare gli attributi già visti background e color. Con background è possibile specificare anche l'URL ad una immagine, es:

{ background: http://www.miosito.it/miaimmagine.gif }

Ci sono altre due caratteristiche dei CSS che dobbiamo menzionare per completare la trattazione e sono il raggruppamento e l'assegnamento di classi.

Tramite il raggruppamento si possono o ridefinire più tag con gli stessi attributi ( 1 ) oppure si possono raggruppare gli attributi dividendoli in famiglie di informazione ( 2 ); es:

1. H1, H2, H3 { color: #00FF00 }
2. H4 { font: bold normal 14pt }

Questi però tendono spesso a creare più confusione che altro, visto che devono essere rispettati degli ordini particolari nell'elencare le opzioni e quindi se ne fa un uso molto sporadico ed eccezionale.

Più utile è l'assegnamento di classe che consente di ridefinire diversamente un tag per più scopi utilizzando una estensione detta classe.

Ad esempio se pensate di ridefinire il tag di paragrafo per utilizzare un font di colore blu o rosso, potete utilizzare un costrutto del genere:

P.blu { font: times 12 pt; color: #0000FF }

P.red { font: times 12 pt; color: #FF0000 }

Quando li andrete ad utilizzare, farete così:

<P class=blu>Paragrafo in blu</P>

<P class=red>Paragrafo in rosso</P>

Questo è tutto quanto vi può servire per iniziare ad utilizzare i fogli di stile, per creare le vostre pagine e metter su un bel sito web.

Con questa lezione si conclude il corso di HTML, anche se su Software Planet ( www.softwareplanet.net ) saranno aggiunte tante altre risorse per i webmaster, come script, corsi di Javascript, Perl...

Torna all'indice Generale del corso di Corso di HTML di Software Planet