Lo stile

Originariamente i tag HTML servivano a definire solo il contenuto di un documento.

Era come dire "Questa è una intestazione", "Questo è un paragrafo", "Questa è una tabella", semplicemente usando dei tag sintattici come h1, p, table e così via, supponendo che l'aspetto (o layout) del documento dovesse essere un problema del browser, senza bisogno di usare tag di formattazione.

I browser più importanti (Netscape e Internet Explorer) però continuavano ad aggiungere nuovi tag e attributi alle originali specifiche HTML e diventò quindi sempre più difficile creare siti Web dove il contenuto del documento HTML fosse chiaramente separato dal layout di presentazione.

Per risolvere questo problema, il World Wide Web Consortium (W3C), un'associazione non profit, responsabile dello standard HTML, creò gli STILI in aggiunta all'HTML 4.0.

Lo stile può essere inserito, come abbiamo visto, nella sezione head della pagina oppure in fogli di stile esterni (Style Sheets) che sono utilizzati da tutte la pagine del sito che acquista in questo modo uno stile unico.

Un foglio di stile deve avere l'estensione .css (per esempio: miostile.css) e quindi non è un file HTML.
CSS sta per Cascading Style Sheets (foglio di stile a cascata).

Un foglio di stile esterno può risparmiarci un sacco di lavoro! Potremo infatti cambiare il look di tutto il sito, modificando solamente il file miostile.css! Per fare questo, ogni pagina del sito deve essere collegata al foglio di stile in questo modo:

Un foglio di stile esterno non contiene nessun tag, ma solo tutti gli elementi che, nelle pagine HTML, si mettono dentro il tag style. Potete editarlo con il vostro normale editor, ma bisogna salvarlo con l'estensione css
Vediamone un esempio:

 BODY { font-family:Verdana; font-size:x-small;
		 background-color:#ffff99; color:navy }

H1 {font-size:medium; text-align:center}
H2 {font-size:small}

A:link {color:blue}
A:visited {color:#cc3399}
A:hover {color:white; background:navy}

TABLE {width: 100%;  border:5px solid #cc0000 }

TD  { border: 2px solid #cc0000;	background-color:white;
      font-size:small; text-align:left; padding:20px }

Le classi

Supponiamo di volere due tipi diversi di paragrafo nel documento HTML:

• uno scritto in rosso e allineato a destra (che chiameremo paragrafo di classe rosso)
• uno scritto in verde e centrato (che chiameremo paragrafo di classe verde).

Possiamo usare classi differenti anche per altri elementi HTML, tranne naturalmente per il body che è unico.

Un tutorial in italiano per saperne di più