Come collegare un foglio di stile CSS ad un documento HTML: Guida e Tutorial 2018

Come collegare un foglio di stile CSS ad un documento HTML?

Sono diversi i modi e strategie per inserire i fogli di stile CSS in un documento html, ma prima di tutto c’è necessità di chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.

Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento, mentre si dice esterno quando è 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 spieghiamo come collegare un foglio di stile (CSS) ad un documento HTML: si tratta del metodo più popolare e semplice per collegare le regole CSS a 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.

Prima di passare al Tutorial, è bene fornire dei chiarimenti utili su cosa è un CSS e perché è importante.

collegare un CSS ad un HTML

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 CS;
  • 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 ecco 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:

collegare un CSS ad un HTML

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

Perché usare il CSS?

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.

Vengono chiamati cascading (“a cascata”) perché i fogli di stile su cui lavorare sono svariati, ma solo uno alla fine “eredita” a cascata tutte le proprietà dei fogli precedenti.

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 </ 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 .css esterni;
  • 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:

collegare un CSS ad un HTML

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 un carattere cancelletto (#), seguito dall’ID dell’elemento.

Tre fogli di stile: tipologie

Esistono tre tipi di fogli di stile CSS: esterni, interni, 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.

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.

collegare un CSS ad un HTML

CSS incorporato

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.

collegare un CSS ad un HTML

Si possono utilizzare fogli di stile multipli che consentono di applicare uno stesso foglio stile a più pagine html.

In tale modo si può formattare allo stesso modo un gruppo di pagine o un intero blog aziendale o personale. Grazie a questa tecnica si può cambiare la formattazione di tutto un sito modificando poche righe di codice in un foglio stile.

collegare un CSS ad un HTML
utilizzare fogli di stile multipli

NB: le diverse tecniche (stile inline, 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: step e tips

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.

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.

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.

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.

Conclusioni

Grazie a questo Tutorial avrai finalmente compreso in che modo è possibile collegare un file CSS al tuo documento HTML. Collegare un CSS ad un 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 dato che 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.

 


Scrivici per informazioni





INDIRIZZO

Via Imperia, 2 – 20142 Milano (MI)

E-MAIL

contattaci@nextre.it

TELEFONO

+39 02 49518390

Dal blog di Nextre
Altri articoli simili
vai al blog