CREARE PAGINE WEB > Inserire un Foglio Stile esterno - CSS

I 3 Manuali
fondamentali per l uso del computer
12% di sconto

Acquista ora a soli 75 euro

Clicca qui, per riceverli
comodamente a casa tua.

Questa lezione non è aggiornata ma è liberamente consultabile.
Se vuoi acedere alle lezioni riguardanti la creazione di pagine web con HTML,
vai al seguente sommario: Creare siti web in HTML e CSS.

LIMITI DEI FOGLI STILE INCORPORATI

Dalla lezione precedente, hai visto come descrivere lo stile, all'inizio di una pagina web.
Questo metodo, rende più semplice il codice e la gestione della pagina.
Ma non dell'intero sito (composto da più pagine web).
Infatti,
- su ogni pagina, devi descrivere lo stile, e
- se intendi cambiare lo stile di un tag, lo devi fare su tutte le pagine.

Ad esempio, poniamo che,
su tutte le pagine del tuo sito, hai impostato lo sfondo giallo con il seguente codice:

BODY { background-color :
yellow}

Ora intendi, modificare il colore dello sfondo di tutte le pagine, in grigio.

Per fare questo,
dovrai aprire una ad una, tutte le pagine del tuo sito e modificare lo stile del tag <body>, inserendo questo codice:

BODY { background-color :
silver}

METTERE TUTTI GLI STILI SU UN FILE ESTERNO

Per risolvere questo noioso problema,
all'inizio della creazione del tuo sito,
invece di incorporare il foglio stile all'interno di ogni pagina web,
devi creare un file esterno e collegarlo ad ogni pagina web.

Il file esterno può essere uno solo, cosicché,
cambiando il valore di un attributo in esso,
tutte le pagine collegate al file esterno, verranno trasformate.

CREARE UN FOGLIO STILE ESTERNO

Per creare un foglio di stile esterno,
1 - apri il blocco note e digita il seguente codice di esempio:

body {background-color :
yellow}

2 - Salva il file con estensione css.
Nominalo, ad esempio, stile.css

COLLEGARE LA PAGINA WEB AL FOGLIO STILE ESTERNO

Per collegare la tua pagina web al foglio stile esterno,
in questo caso, al file stile.css,
1 - inserisci tra i tag <head></head> il seguente codice:

<link rel="stylesheet"
type="text/css" href="stile.css"/>

Ricordati, di cancellare eventuali fogli stile incorporati.
Quelli che hai visto nella lezione precedente (<style type="text/css"> </style>).

Bene, ora non ti resta che collegare tutte le pagine del tuo sito
al foglio stile esterno che hai creato con il file stile.css,
inserendo in ognuna di essa il codice:

<link rel="stylesheet"
type="text/css" href="stile.css"/>

MODIFICARE LO STILE A TUTTE LE PAGINE DEL SITO

In seguito, per cambiare lo stile a tutte le pagine del tuo sito,
sarà sufficiente modificare solamente il file stile.css.

Ad esempio,
per cambiare lo sfondo della pagina in grigio,
ed aggiungere lo stile al tag <P> ed al tag <H3>,
1 - apri il file stile.css
2 - modificalo in questo modo:

body {background-color : yellow}

p { background-color: silver; color: red; font-size:20px }

h3 {style="background-color:green;
color:yellow}

3 - salva le modifiche.

L'esempio completo di una pagina web collegato ad un foglio stile potrà quindi, essere il seguente:

<html>

<head>

<title>Pagina collegata ad un foglio
stile</title>

<link rel="stylesheet" type="text/css"
href="stile.css"/>

</head>

<body>

<H3>Canto I</H3>

<P>

Per correre miglior acque alza le vele<BR>

ormai la navicella del mio ingegno, <BR>

che lascia dietro a sé mar sì crudele;

</P>

<P>

e cantero di quel secondo regno<BR>

dove l'umano spirito si purga<BR>

e di salire al ciel diventa degno.

</P>

</body>

</html>

Fenomenale, no!

PCdaZERO.it - Guida facile per usare il computer