CREARE PAGINE WEB > Inserire un Foglio Stile esterno - CSS

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}
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}
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}
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!