Cos’è CSS? Definizione e applicazione

Cascading Style Sheets, o CSS, è un linguaggio di programmazione molto utile per determinare il design dei documenti elettronici. Con l’aiuto di istruzioni semplici, presentate come un codice sorgente chiaro, gli elementi del sito web come il layout, il colore e la tipografia possono essere adattati come più si desidera. Grazie ai fogli di stile a cascata, la struttura semantica e il contenuto del documento rimangono inalterati. Il linguaggio CSS è emerso a metà degli anni ‘90 ed è ora considerato il linguaggio standard dei fogli di stile in tutto il World Wide Web.

CSS, così come HTML, è uno dei linguaggi fondamentali del World Wide Web. Mentre HTML viene utilizzato per aggiungere del testo a un sito web e strutturarlo semanticamente, CSS serve per definire il design del suo contenuto. Nonostante HTML e CSS siano usati in combinazione, le istruzioni di design CSS e gli elementi HTML esistono separatamente l’uno dall’altro. Ciò significa che una macchina può leggere un documento elettronico anche senza CSS. Tuttavia, con l’aiuto di CSS, il contenuto del browser viene preparato visivamente e presentato in modo accattivante.

CSS è uno “standard vivente” che continua a essere sviluppato dal consorzio del World Wide Web. Per questo motivo, vi sono sempre nuove funzioni e applicazioni pratiche da scoprire. Il diffuso linguaggio dei fogli di stile è emerso negli anni ‘90, tuttavia, l’idea di usare i fogli di stile per visualizzare il contenuto del web non era del tutto nuova a quel tempo. CSS però differiva in un aspetto importante da altri elementi preesistenti su HTML e orientati alla visualizzazione: il linguaggio offriva e offre tutt’ora agli utenti la possibilità di definire, in un singolo foglio di stile, regole di design per gruppi di elementi presenti su più documenti.

Il successo di un sito web non dipende unicamente dal contenuto ma anche da un buon design. Gli utenti perdono interesse rapidamente nei siti web che non sono user-friendly o ben strutturati. In questo ambito, CSS offre una gamma di opzioni di design che non sono disponibili su semplici documenti HTML.

CSS permette, ad esempio, di controllare alcune specifiche a livello centrale. Questo significa che elementi simili, come tutti i collegamenti ipertestuali o le immagini, all’interno di un singolo documento possono essere riconosciuti e formattati usando un singolo comando. Inoltre, non c’è bisogno che le istruzioni di progettazione appaiano sotto forma di un foglio di stile nel documento HTML. CSS permette infatti di salvare le istruzioni su un foglio di stile esterno, cioè un file separato, il quale può essere usato anche per altri documenti.

Oltre alle istruzioni di visualizzazione di base relative ai colori, alle forme e alla tipografia degli elementi HTML, CSS presenta al giorno d’oggi anche moduli più sofisticati. Tramite questi è possibile, ad esempio, definire animazioni o rappresentazioni diverse a seconda del mezzo di output. In questo modo, lo stesso documento HTML può essere preparato in modo identico per tutti i possibili supporti. Poiché il contenuto e il design sono separati in questo documento, il codice del sito web è più chiaro. Il linguaggio di stile SASS, spesso associato a CSS, offre ancora più possibilità, ma non può sostituirlo completamente.

È possibile incorporare il linguaggio CSS a un documento elettronico tramite l’utilizzo di fogli di stilesia interni che esterni. Inoltre, le proprietà da applicare possono essere posizionate direttamente nel codice sorgente HTML di un dato elemento utilizzando lo stile inline. Nei paragrafi successivi riportiamo una panoramica dei tre metodi disponibili per integrare CSS nei documenti HTML.

Sui fogli di stile esterni, le istruzioni CSS sono definite su file esterni tramite l’estensione “.css” e integrati ai file HTML attraverso un tag “link”. Questo è il metodo più comune dato che qui contenuto e design sono nettamente separati ed è pertanto possibile apportare modifiche facilmente. Il collegamento è effettuato nell’area “head” del documento HTML come segue:

Attraverso dei fogli di stile interni si vanno ad aggiungere le istruzioni CSS direttamente sul file HTML. È opportuno notare che questi fogli sono solo applicabili a documenti rilevanti. Per i fogli di stile interni, bisognerà inserire l’elemento “style” nell’area “head” del documento HTML come riportato nell’esempio seguente:

In questo metodo le istruzioni CSS sono contenute nei file HTML così come per i fogli di stile interni. Tuttavia, vi è una differenza importante: gli attributi corrispondenti sono localizzati direttamente all’inizio del tag dell’elemento e non possono essere applicati a nessun altro elemento. Questo metodo è particolarmente utile se non si vogliono avere delle istruzioni di design generali.

Questi “box” sono in seguito formattati specificando la dimensione, la forma e il colore. Oltre a questi semplici attributi, esistono anche delle istruzioni CSS più sofisticate per inserire delle ombre nel testo, aggiungere filtri per le immagini ed evidenziare forme e altri elementi.