I fogli di stile (Style Sheet)
 
Utilizzando i fogli di stile possibile precisare le caratteristiche stilistiche che dovr assumere una pagina HTML senza doverle indicare volta per volta in ogni sezione del documento.

I fogli di stile utilizzano una sintassi diversa da quella dell'HTML:
- gli attributi sono inseriti fra parentesi graffe { };
- per assegnare i valori si utilizzano i ":" invece del segno "=".

Nota: se le parentesi graffe non sono presenti sulla tastiera si possono ottenere con la seguente combinazione di tasti:
{ = ALT + 123 sul tastierino numerico
} = ALT + 125 sul tastierino numerico

Quando una pagina HTML viene aperta da un browser che supporta i fogli di stile i vari elementi della pagina assumono le caratteristiche definite nel foglio di stile.
I fogli di stile possono essere:
- Inseriti nella pagina HTML (incorporati);
- Memorizzati in un file esterno che ha estensione .ccs (esterni)

  I fogli di stile incorporati

Le informazioni relative alla formattazione sono poste all'inizio del codice HTML nella sezione <HEAD> e valgono per tutto il documento.
Per definire il foglio di stile viene utilizzato il tag <STYLE> e </STYLE>. Fra questi tag vengono elencati gli attributi inseriti fra parentesi graffe.

Esempio:
<HTML>
<HEAD>
<TITLE>Fogli di stile incorporati</TITLE>
<STYLE type="text/css">
H1 { font-size:24px; font-family:verdana; color:green }
P { font-size:18px; font-family:arial; color:red }
</STYLE>
</HEAD>
<BODY>
<H1>Questa un'intestazione, il testo di colore verde, il font il verdana, l'altezza del carattere di 24 pixel</H1>
<P>Questo un paragrafo, il testo di colore rosso, il font l'arial, l'altezza di 18 pixel</H2>
</BODY>
</HTML>

ESEMPIO E CODICE HTML

  I fogli di stile esterni

Questi fogli di stile hanno il vantaggio di consentire la formattazione di pi pagine. Per realizzare un foglio di stile esterno necessario:
  • Creare un documento di testo e definire gli stili con una sintassi identica a quella utilizzata per i fogli di stile incorporati.
  • Esempio: H1 { font-size:24px; font-family:verdana; color:green }
    P { font-size:18px; font-family:arial; color:red }
  • Salvare il documento con estensione .css.
    Esempio: style.css
  • Inserire nella sezione HEAD di ogni pagina HTML il collegamento al foglio di stile utilizzando questa sintassi:
    <link rel=stylesheet href="style.css" type="text/css">

Se in seguito si desidera cambiare lo stile dei documenti, baster modificare soltanto le definizioni nel foglio di stile.

ESEMPIO E CODICE HTML - FOGLIO DI STILE

 

  Esempio di foglio di stile
 
Nei fogli di stile possibile definire la formattazione per ogni TAG HTML. Alcuni TAG. come <BODY> hanno valore per tutto il documento, pertanto gli attributi definiti per questo TAG vengono assegnati a tutto il documento.
Esempio:
<STYLE>
BODY { font: bold normal 15px verdana red}
</STYLE>

I fogli si stile permettono di controllare vari elementi che concorrono alla formattazione delle pagine HTML: il colore della pagina e del testo, il tipo, le caratteristiche e le dimensioni dei font, gli allineamenti del testo, il posizionamento delle immagini, la forma del cursore del mouse, gli effetti di transizione fra le pagine, ecc.

L'esempio mostra un semplice foglio di stile:

<STYLE>
BODY { font-family:Verdana, Arial, Helvetica; font-size:12pt; color:"#000000"; background:"#FFFFFF" }
TBODY { font-family:Verdana, Arial, Helvetica; font-size:18pt; color:#000000; background:"#FFFFFF" }
A { color:blue; text-decoration: none }
</STYLE>

Nella riga BODY viene definito:
- il tipo di font, nell'ordine Verdana, Arial Helvetica;
- l'altezza del font: 12pt;
- il colore del testo: nero
- il colore della pagina: bianco

Nella riga TBODY vengono definiti gli stessi parametri per il testo che si trova inserito nelle tabelle.

Nella riga A viene definito:
- il colore dei collegamenti ipertestuali;
- l'assenza della sottolineatura nei collegamenti ipertestuali.

ESEMPIO - FOGLIO DI STILE

E' possibile fare riferimento a pi fogli di stile. In questo caso bene raggrupparli in una sola cartella, generalmente denominata CSS. In questo caso bisogna fare attenzione ad indicare in modo corretto il percorso di ricerca.

  • se il file HTML si trova in una cartella superiore:
    <link rel=stylesheet href="css/style.css" type="text/css">
  • se il file HTML si trova in una cartella allo stesso livello di quella che contiene il foglio di stile:
    <link rel=stylesheet href="../css/style.css" type="text/css">
  • ecc...