Indice
Esistono tre modi per inserire codice CSS all'interno della tua pagina HTML: usando un foglio di stile interno alla pagina, utilizzando gli stili incorporati oppure un foglio di stile esterno.
Il foglio di stile interno si applica a una singola pagina, uno stile in linea a un singolo elemento e un foglio di stile esterno può potenzialmente essere applicato ad un intero sito web.
CSS interno
Un foglio di stile interno è utile quando una singola pagina HTML deve avere il suo stile unico. Il CSS viene quindi incorporato all'interno della pagina utilizzando l'elemento <style></style>.
Il foglio di stile è inserito all'interno del tag <head> della pagina, e l'elemento <style></style> deve avere l'attributo impostato su text/css.
<style type="text/css">
p { color: blue; }
</style>
Stile in linea
Questo approccio è un po' antiquato e dovrebbe essere usato solo in assenza di alternative, poiché mescola stile con contenuto, rendendo i cambiamenti futuri più complicati.
Usate questa soluzione come modo rapido per testare gli stili prima di inserirli in un foglio di stile esterno.
<p style="color: blue;">Soluzione non ottimale</p>
Foglio di stile esterno
Il modo più comune per includere CSS è attraverso un foglio di stile esterno.
Le regole del foglio di stile vengono inserite in un file di testo separato con estensione .css.
Per richiamare il CSS viene creato un riferimento alla posizione del foglio di stile utilizzando l'elemento <link> nell'intestazione della pagina web.
L'attributo rel deve essere impostato su "stylesheet" e l'attributo meta type su "text/css". Infine la posizione del foglio di stile è specificata attraverso l'attributo href.
<link rel="stylesheet" type="text/css" href="style.css">
Un altro modo meno comune per includere un foglio di stile esterno è l'uso
della funzione CSS @import dall'interno dell'elemento.
<style type="text/css">
@import url(style.css);
</style>
L'uso di un foglio di stile esterno è preferito rispetto agli altri due perché in questo modo si riesce a separare i fogli di stile dal documento HTML. Con questa modalità sarà più facile in futuro fare modifiche al codice CSS senza dover perdere troppo tempo.
Questa pratica porta anche ad avere dei vantaggi nelle prestazioni; i fogli di stile esterni vengono memorizzati nella cache e quindi sono scaricati una sola volta, rendendo più veloce il caricamento della pagina rispetto agli altri due metodi.
Conclusione
In conclusione vi consiglio di utilizzare i primi due metodi solo quando si devono fare dei test o non è possibile modificare / creare dei fogli di stile esterni.
