Logo Vallepiatta
 

I FOGLI DI STILE

E' tempo ora di imparare ad usare il linguaggio HTML in un modo un poco più professionale usando i fogli di stile CSS (Cascading Style Sheets).

I fogli di stile sono il frutto della collaborazione tra i produttori di software ed il W3C (Word Wide Web Consortium) 

www.w3c.org

Avrete certo notato che ogni comando HTML ha dei parametri che molto spesso sono ripetuti in ognuno di essi; questo comporta una grande perdita di tempo ed il rischio di commettere errori.

Pensate ora di avere costruito un sito di diverse centinaia di pagine; se sorgesse l'esigenza di dover cambiare il formato di presentazione di tutte le vostre pagine, dovreste cambiarle tutte e magari anche in poco tempo: vi trovereste in un bel guaio!

I fogli di stile risolvono proprio questo problema e rendono inoltre più leggibile il vostro codice HTML perchè sarà scritto in modo più sintetico.

Si, ma cosa sono questi fogli di stile? Sono un insieme di informazioni relative alla formattazione ed alle caratteristiche stilistiche di una o più pagine HTML.

I fogli di stile usano quindi regole che si applicano ad un comando HTML e ne dichiarano le caratteristiche stilistiche.

Il codice CSS può essere implementato in tre modi diversi a seconda delle circostanza:

  1. foglio di stile incorporato cioè interno ad un comando HTML,
  2. foglio di stile interno cioè interno alla sezione <HEAD>,
  3. foglio di stile esterno cioè in un file esterno con suffisso .css 

Il primo caso rende solo più elegante il codice HTML, ma non risolve affatto il problema su citato. Il secondo caso rende più sintetico il codice HTML e semplifica, ma non risolve il problema su citato. Pertanto non saranno trattati.

Ci occuperemo quindi solo del terzo caso, il foglio di stile esterno: esso è un file con nome a vostro piacere, ma con suffisso rigorosamente .css

Si pone ora un problema: come si fa a legare il codice HTML di una pagina ad un foglio di stile esterno? Si usa un comando <LINK> all'interno della sezione <HEAD> del codice HTML. 

Un esempio vale più di una spiegazione.

CODICE HTML CODICE DI stilemio.css
<html>
<title>Esempio di CSS interno</title>
<link rel="stylesheet" type="txt/css" href="stilemio.css">
</head>
<body>
<p class="p1">Paragrafo formattato con stilemio.css</p>
</body>
</html>		 .p1 {
text-align: justify;
text-indent: 30px;
font-family: "Courier New", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}

Osservate bene le differenze notevoli nella sintassi e nella punteggiatura dei due casi.

Continuate con le due prossime pagine del tutto identiche esteriormente, ma molto diverse nel loro rispettivo codice HTML: la prima delle due pagine è scritta normalmente, mentre la seconda utilizza un foglio di stile esterno di nome stilemio.css.

Infine con l'editore dei testi andate a vedere il contenuto di stilemio.css.

P.S.
Per vedere il codice HTML di una pagina aperta nel browser Internet Explorer fate clic su Visualizza e poi su HTML.