Come collegare un foglio di stile CSS ad un documento HTML

Ci sono diversi modi e strategie per inserire i fogli di stile CSS in un documento HTML, ma prima di tutto c’è necessità di chiarire la fondamentale distinzione tra fogli esterni e interni:

• un foglio di stilesi dice interno quando il suo codice è compreso in quello del documento;
• si dice esternoquando è definito in un file separato dal documento.

I fogli di stile CSS sono semplici documenti testuali modificabili anche con un editor di testo ai quali si assegna l’estensione “.css”.

Ogni sito Web o blog dovrebbe avere un foglio di stile su cui vengono definiti tutti gli elementi HTML.

In questa guida-tutorial spiegheremo il modo più popolare per collegare un foglio di stile (CSS) ad un documento HTML.

Grazie a questo metodo, tutti gli stili sono collocati in un file con estensione (.css) e non è necessario scrivere tutti gli stili in un solo documento HTML. Il file CSS viene salvato sul server e deve essere creato solo un collegamento ad esso nel documento HTML.

Ma prima di passare al tutorial, è bene fornire dei chiarimenti utili su cos’è un CSS e perché è importante.

Cos’è il CSS

Se ne sente parlare, ma in effetti poche persone sanno esattamente che cosa sia il CSS: acronimo di Cascading Style Sheets, in italiano viene tradotto come fogli di stile.

Si tratta di un linguaggio che gestisce il design e la presentazione delle pagine web (cioè l’aspetto estetico) e lavora in combinazione con l’HTML o HyperText Markup Language.

• I CSS descrivono in che modo i diversi elementi HTML devono essere visualizzati su schermo, carta o su altri supporti;
• Il CSS permette di risparmiare molto lavoro dato che consente di controllare il layout di più pagine web contemporaneamente;
• I fogli di stile esterni sono archiviati in file CSS;
• Con il CSS si possono stabilire le regole secondo cui il sito deve mostrare le informazioni, mantenendo tutti i comandi relativi alla formattazione e allo stile (font, colori, dimensioni, etc.) separati da quelli relativi al contenuto.

Ad esempio, qui di seguito vi facciamo vedere una pagina HTML visualizzata con quattro diversi fogli di stile. Basta fare clic sui seguenti link: “Stylesheet 1”, “Stylesheet 2”, “Stylesheet 3”, “Stylesheet 4” per visualizzare i diversi stili:

Questa pagina utilizza gli elementi “.div “ (elemento blocco per eccellenza) per raggruppare diverse sezioni della pagina HTML.

Perché usare il CSS?

I fogli di stile vengono chiamati cascading (a cascata), perché l’ultima regola sovrascrive la precedente a parità di elemento. I fogli infatti sono differenti, ma uno di essi eredita le proprietà degli altri fogli.

Il CSS viene utilizzato per definire gli stili delle pagine web, inclusi il design, il layout e le variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo.

Se il tuo obiettivo è rendere quanto più personale il blog o un sito web, è necessario approfondire la conoscenza del CSS.

Inoltre, il CSS aiuta a risolvere un problema rilevante: l’HTML non ha lo scopo di contenere tag per la formattazione di una pagina web, ma descrive il contenuto di quella pagina. Ad esempio:

<h1> questa è un’intestazione, un titolo </ h1>

<p> questo è un paragrafo. </ p>

Da quando i tag font e gli attributi di colore sono stati aggiunti alle specifiche HTML 3.2, è iniziato un vero e proprio incubo per gli sviluppatori web.

Sviluppare grandi siti web, in cui i caratteri e le informazioni sul colore vengono aggiunti ad ogni singola pagina, è diventato un processo lungo e costoso.

Il CSS permette di risparmiare molto lavoro dato che:

• le definizioni di stile vengono normalmente salvate in file .cssesterni;
• lo scopo principale è quello di separare la formattazione dalla struttura del documento: se la seconda è demandata ai tag HTML, la prima è di esclusiva competenza dei fogli di stile;
• con un foglio di stile esterno, puoi cambiare l’aspetto di un intero sito web cambiando un solo file;
• per risolvere questo problema, il World Wide Web Consortium (W3C) ha creato CSS;
• ha rimosso la formattazione dello stile dalla pagina HTML.

Sintassi CSS

Una serie di regole CSS è composta da un selettore e un blocco di dichiarazione: il selettore punta all’elemento HTML che desideri applicare allo stile, mentre il blocco di dichiarazione contiene una o più dichiarazioni separate da punto e virgola.

Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti. Una dichiarazione CSS termina sempre con un punto e virgola e i blocchi di dichiarazione sono circondati da parentesi graffe.

Nell’esempio seguente, tutti gli elementi <p> saranno allineati al centro, con un colore di testo rosso:

Selettori CSS

I selettori CSS sono usati per “trovare” (o selezionare) elementi HTML in base al loro nome, id, classe, attributo e altro. Il selettore di elementi li esamina in base al nome: puoi selezionarli tutti in una pagina.

Il selettore ID

Il selettore ID utilizza l’attributo id di un elemento HTML per selezionarne uno specifico. L’ID di un elemento dovrebbe essere unico all’interno di una pagina, quindi il selettore di identificazione viene utilizzato per selezionare un elemento unico. Per selezionarne uno con un ID specifico, scrivi il carattere cancelletto (#), seguito dall’ID dell’elemento.

Tre tipologie di fogli di stile

Esistono tre tipi di fogli di stile CSS: esterni, interni e in linea.

I fogli di stile interni controllano l’aspetto di una singola pagina. Questa possibilità prevede che il codice CSS sia scritto direttamente all’interno del documento HTML.

Vediamo nello specifico come funzionano queste tre differenti tipologie.

CSS in linea

Si utilizza il CSS in linea quando si ha la necessità di applicare lo stile al solo blocco o parte di codice che stiamo trattando, senza cioè che questo stile vada ad influire su altre parti della stessa pagina web. Si pensi, ad esempio, ad un paragrafo <p> che debba avere determinate caratteristiche che non sono applicate a tutti gli altri paragrafi <p> contenuti all’interno della stessa pagina web.

CSS incorporati

Si tratta di stili a metà strada tra i CSS in linea e quelli esterni. La peculiarità fondamentale di questi attributi di stile è quella di essere assegnati all’intero documento.

Impostato il CSS incorporato all’interno del documento, gli stili vengono assegnati automaticamente al testo racchiuso tra i marcatori.

Rispetto ai fogli di stile in linea, i CSS incorporati consentono il controllo di un intero documento.

CSS esterni

Se gli stili da definire sono molti e se più di una sola pagina web ne farà uso, la cosa migliore da fare è quella di creare una struttura esterna alla quale possono accedere tutte le pagine interessate.

È utile qualora si voglia apportare una modifica all’intero sito per cambiare un tipo di font o sostituire un colore con un altro. Grazie ai CSS esterni sarà sufficiente apportare la modifica una sola volta a quel singolo foglio esterno per vedere poi immediatamente su tutte le pagine il risultato della modifica.

Si possono usare fogli di stile multipli per distinguere la formattazione in casi speciali, come per i dispositivi mobili con parecchie peculiarità di formattazione oppure per lavorare su browser come Internet Explorer, così da dare maggiore supporto in termini di retrocompatibilità a browser datati.

È comunque consigliato utilizzare il minor numero di fogli di stile possibili, impacchettando tutto in un foglio unico, anche per non appesantire troppo il sito e fare un lavoro più ordinato, pulito e celere possibile.

NB: le diverse tecniche (stile in linea, stile incorporato ed esterno) non sono tra loro incompatibili. All’interno di uno stesso documento HTML è possibile utilizzare le diverse tecniche.

Come collegare un foglio di stile CSS ad un documento HTML in 2 step

La creazione di un foglio di stile e la scrittura dei comandi di CSS avviene mediante l’utilizzo di un editor di testo. Affinché la pagina web rispetti le regole e le impostazioni apportate, non si deve fare altro che collegare il foglio di stile all’HTML. Ecco i 2 step che bisogna seguire.

Step 1: Controllare il percorso del file CSS e inserimento delle regole di stile in linea

Il collegamento è solo una semplice linea di codice HTML che inserisci tra i tag <head> e </ head> del tuo documento HTML:

<link rel = “stylesheet” type = “text / css” href = “stylesheet.css” media = “schermo” />

Assicurati di includere il percorso corretto per il tuo file CSS nell’href. Si consiglia di posizionare il file CSS nella stessa directory del file HTML o creare una sotto-directory chiamata CSS per quei file da memorizzare.

Step 2: Salvare il file HTML e controllare le modifiche

Salvare le modifiche apportate nel file HTML e inserire l’URL del tuo sito web nel browser. Gli stili scritti nel file CSS dovrebbero ora apparire direttamente sul tuo sito web o blog.

Collegamenti ipertestuali: Chiarimenti utili

Ecco alcuni chiarimenti utili sui collegamenti ipertestuali:

Rel: questo attributo permette di indicare che relazione intercorre tra il documento corrente e il documento di destinazione del link. Può essere usato solo se presente anche l’attributo href e permette l’utilizzo solo di determinati valori, che sono importantissimi per i browser e i motori di ricerca. Solitamente, sarà semplicemente un foglio di stile se colleghiamo un file CSS (foglio di stile).

Type: definisce il contenuto del file a cui è collegato. Il valore dell’attributo dovrebbe essere di tipo MIME come text / html, text / css e simili.

Href: specifica la posizione del file con cui è necessario creare un collegamento. Se il file si trova nella stessa directory, è sufficiente inserire il nome del file.

Media: questo attributo definisce il supporto. Il suo valore deve essere una query multimediale.

Conclusioni

Grazie a questo tutorial avrai finalmente compreso in che modo è possibile collegare un file CSS al tuo documento HTML. Avrai capito che collegare un CSS ad un foglio HTML consente di:

• risparmiare tempo. Se la stessa classe viene utilizzata in più pagine devi solo definire quella classe nel file CSS e non in ogni pagina utilizzata;
• rendere più veloce il tuo sito web. Questo succede perchè il file CSS viene caricato e memorizzato nella cache nel browser del visitatore. La prossima volta che l’utente visita lo stesso sito web o blog, alcune informazioni sono già nella sua cronologia del browser;
• posizionare meglio il sito o il blog sui motori di ricerca. Poiché il codice del foglio di stile è definito nel file CSS, i motori di ricerca non avranno difficoltà a leggerlo.

Se qualcosa non ti è chiaro e desideri ricevere maggiori informazioni, contattaci tramite il form che trovi in questa pagina.