CSS3 Base – 2.2 – Dove posizionare il CSS

In questa lezione vediamo dove collocare un foglio di stile nel nostro sito web.

Un foglio di stile può essere:

Un foglio di stile esterno, viene legato alla pagina HTML mediante questo tag:

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

il tag <link> va posizionato dentro <head> del documento e l’attributo “href” indica il percorso ed il nome del foglio di stile.

Siccome è un file esterno, possiamo modificarlo senza dover toccare la pagina a cui è associato.

Se il foglio esterno è lo stesso per tutte le pagine di un sito, modificare lo stile significa cambiare l’aspetto dell’intero sito.

Un foglio di stile si dice interno, quando è compreso nel codice della pagina a cui è associato, cioè risiede nello stesso file.

I CSS interni si dividono ulteriormente in:

stili incorporati, quando vanno inseriti nel tag <head> della pagina;
stili in linea, quando sono inseriti direttamente dentro il tag dell’elemento HTML che vogliono modificare.

Esempio di stile incorporato:

Esempio di stile in linea:

Cosa significa foglio di stile in cascata?

Significa che:

se definisco uno stile per tutto il sito, questo sarà ereditato da tutte le pagine che lo implementano;
se applico uno stile ad un elemento HTML mediante un CSS esterno, posso ridefinire tale stile inserendo un CSS interno;
se applico uno stile ad un elemento HTML mediante un CSS incorporato, posso ridefinirlo inserendo un CSS in linea nel tag dell’elemento.

In pratica, lo stile che definisco a monte per elementi generici può essere cambiato a valle, negli elementi più specifici.

Nelle prossime lezioni vedremo degli esempi su come posizionare ciascun tipo di CSS.

Andrea Rizzieri