Inclusione dei fogli di stile

I fogli di stile possono essere inclusi nelle pagine HTML in 3 modi differenti: in linea; internamente; esternamente. L'inserimento "in linea" avviene direttamente all'interno di un prederminato tag HTML nel corpo del documento; l'inserimento "interno" avviene nell'intestazione del documento tra i tag <head> e </head>; l'inserimento "esterno" viene effettuato da un file apposito con estensione ".css" che viene richiamato con un semplice link all'interno dell'intestazione di ciascuna pagina.

1.1 Fogli di stile "in linea"

<html> <head> <title>Titolo del documento</title> </head> <body> <p style="gli elementi di stile vanno inseriti qui"></p> </body> </html>

1.2 Fogli di stile "interni"

<html> <head> <title>Titolo del documento</title> <style type="text/css">gli elementi di stile vanno inseriti qui</style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html>

1.3 Fogli di stile "esterni"

<html> <head> <title>Titolo del documento</title> <LINK href="nomefile.css" rel="stylesheet" type="text/css"> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html>

Come si vede in quest'ultimo esempio il documento punta ad un file con estensione ".css" esterno. All'interno di questo file, preparato con il BloccoNote di Windows© o con un qualunque altro editor di testo, vi saranno tutti gli elementi di stile. Questo file potrà avere un qualsiasi nome, ma sempre estensione ".css". Ovviamente il nome vero del file dovrà essere sostituito nell'esempio posto sopra a "nomefile.css".

Nota: se il file esterno non fosse nella stessa cartella che contiene il documento HTML che lo richiama occorrerà modificare il percorso nella stringa. Se, ad esempio, si trovasse in una sottocartella chiamata stili il richiamo assumerebbe questa forma: <LINK href="stili/nomefile.css" rel="stylesheet" type="text/css">. Se si trovasse in una cartella superiore chiamata sempre stili il richiamo assumerebbe questa forma: <LINK href="../stili/nomefile.css" rel="stylesheet" type="text/css">. Se si trovasse addirittura su un altro spazio web assumerebbe questa forma: <LINK href="http://www.nomedominio.com/nomefile.css" rel="stylesheet" type="text/css">.

1.4 Che tipo di foglio di stile scegliere?

Dipende dal tipo di sito, da quante pagine è formato, se le pagine devono avere tutte o gran parte di esse lo stesso stile. i fogli di stile "in linea" non sono molto pratici in quanto per ogni paragrafo interessato occorre inserirli manualmente, operazione che su pagine complesse può diventare molto lunga e ripetitiva; i fogli di stile "interni" sono adatti a siti formati da poche pagine oppure a siti che, pur avendo un certo numero di pagine, necessitano di stili differenti per ciascuna pagina o gruppo di pagine; i fogli di stile "esterni" sono adatti a siti di dimensioni medio grandi o grandi e che hanno l'esigenza che tutte le pagine abbiano, in termini di stile, le medesime caratteristiche. Con un foglio di stile "esterno" è infatti estremamente facile cambiare le caratteristiche di tutte le pagine: se abbiamo un sito scritto tutto in "Arial 12" e vogliamo sostituire il carattere con un "Verdana 10" basterà cambiare il riferimento al font nel foglio di stile e, in un colpo solo, avremo modificato tutte le pagine !