Archivi tag: fogli

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:

  • interno alla pagina web
  • esterno alla pagina web

CSS Esterni

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.

CSS Interni

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:

CSS Incorporato
CSS Incorporato

 

 

Esempio di stile in linea:

CSS In linea
CSS In linea

Stili in cascata

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.

Video