In questa lezione vi mostro come inserire un CSS esterno e quali sono i suoi vantaggi.
CSS Esterni
Un foglio di stile esterno è un insieme di regole che risiedono su un documento separato dalla pagina web, un file esterno appunto.
Per prima cosa, create un documento di testo a cui darete l’estensione .CSS
Quindi, inserite al suo interno le regole CSS come di consueto ma senza includere il tag <style>.
Infine, dovete collegare il file esterno alle pagine del vostro sito.
Per farlo, vi basta inserire all’interno di <head> il tag <link>, come nell’esempio sottostante:
L’attributo href indica il percorso ed il nome del documento su cui risiede il CSS esterno.
Quando si usa un CSS esterno e quando un CSS interno?
Se volete formattare una sola pagina web, inserite un CSS incorporato:
- il CSS è relativo solo a quella pagina;
- se volete personalizzare un elemento HTML nello specifico, vi basterà aggiungere un eventuale CSS in linea direttamente nel suo tag.
Se volete formattare un sito composto da più pagine, tutte con caratteristiche simili, allora la soluzione migliore è il CSS esterno:
- vi basta creare una sola volta il CSS e collegarlo con <link> a tutte le pagine;
- una modifica al CSS si ripercuote su tutte le pagine del sito;
- se volete poi andare a modificare lo stile di una determinata pagina (senza modificare le altre) vi basterà inserire un CSS incorporato in quella o eventuali CSS in linea.
Ricordatevi che, siccome il CSS funziona in cascata, l’ordine di priorità è il seguente:
- il CSS in linea vince sul CSS incorporato;
- il CSS incorporato vince sul CSS esterno.