WDE #3: Diventare professionisti con i CSS

Nell’articolo precedente di questa serie abbiamo parlato del linguaggio HTML e di come esso conferisca una struttura semantica agli elementi di testo. Una volta creata la struttura di un sito web, è necessario personalizzarlo dal punto di vista grafico, cioè applicare gli stili. Senza di loro, ogni sito web sarebbe una semplice combinazione di testo nero su sfondo bianco, magari abbellito da altri semplici elementi, come link e immagini. I CSS, abbreviazione di Cascading Style Sheets, ci vengono in aiuto.

Perché usare i fogli di stile?

Immagina di creare una pagina HTML e di popolarla con una serie di paragrafi, elenchi, immagini e link. Dovrai decidere come rendere visivamente più presentabili i contenuti. I fogli di stile CSS servono proprio a questo scopo: consentono di separare l’ambito del documento dalla sua presentazione, specificando come i diversi elementi HTML debbano essere rappresentati visivamente.

Non ha senso parlare di HTML senza parlare di CSS e viceversa. L’interconnessione tra questi due linguaggi è molto stretta: Per creare pagine web complete e visivamente attraenti è necessario conoscere le basi di entrambi i linguaggi. I CSS consentono di personalizzare le pagine web, in particolare:

• Aggiungere sfondi
• Aggiungere bordi e immagini
• Cambiare il colore del testo, di singole parole o di porzioni di testo.
• Modificare il carattere e le dimensioni, ovvero definire la formattazione del testo.
• Organizzare il contenuto in modo ben definito
• Specificare i tipi di elenchi puntati o numerati.

Considera un foglio di stile come un insieme di regole che specificano le proprietà di un elemento o di un gruppo di elementi all’interno di una pagina web. Una ‘regola’ CSS comprende un ‘selettore’ e una o più ‘dichiarazioni’. Il selettore seleziona uno o più elementi all’interno del documento. Le dichiarazioni, a loro volta, impostano le proprietà degli elementi selezionati. Per esempio: è possibile colorare di rosso tutto il testo dei paragrafi, mettere uno sfondo colorato su alcune parole, modificare lo stile dei collegamenti all’interno del documento e così via. L’obiettivo finale è quello di gestire l’intero layout di un sito web, rendendolo visivamente più attraente per l’utente finale.

Web Development Essentials di Linux Professional Institute (LPI) insegna a creare regole CSS di base per aggiungere stili alle pagine web. Ma i CSS sono molto più di un insieme di semplici regole statiche.

Tutta la potenza dei CSS

Gli utenti di Internet dispongono di diversi monitor, ognuno dei quali offre un’ampia gamma di risoluzioni possibili. Inoltre, negli ultimi anni, il numero di persone che utilizzano smartphone e tablet per visitare i siti web è in costante aumento. L’area di visualizzazione dei dispositivi mobili è enormemente diversa da quella dei monitor dei computer.

È quindi legittimo chiedersi:

“Come posso creare un sito web che venga visualizzato correttamente su ogni dispositivo?

Al giorno d’oggi, un sito web deve essere responsive, un termine che significa che il sito web risponde in modo diverso in base alle dimensioni del display su cui viene visualizzato. Lo sviluppatore web deve cercare di liberare il più possibile l’utente finale dal dover gestire il ridimensionamento delle pagine che visita durante la fruizione dei contenuti. Un buon marketing per un’azienda passa necessariamente per un sito web di questo tipo, capace di adattarsi ai dispositivi più moderni, siano essi computer, tablet o smartphone.

A tal fine, è necessario utilizzare le cosiddette media queries, speciali dichiarazioni CSS che identificano il dispositivo o una delle sue caratteristiche (come la larghezza massima o minima dello schermo) e applicano stili diversi in base ad esse. Con le media queries, i CSS possono gestire i comportamenti in base alla risoluzione del dispositivo utilizzato, nascondendo gli elementi o modificandone le dimensioni e adattando il layout delle diverse pagine web alle dimensioni effettive dello schermo. È anche possibile modificare la struttura di un documento durante la stampa, eliminando le immagini, il menu di navigazione, la pubblicità e tutto ciò che è considerato superfluo.

Le media query possono anche fare molto di più e personalizzare il sito web in ogni modo!

Web Development Essentials di LPI illustra in dettaglio tutti gli aspetti necessari per creare un sito web reattivo. Tuttavia, offre anche spunti interessanti da considerare quando si progetta un foglio di stile personalizzato per un sito che offra la migliore esperienza di navigazione possibile agli utenti.

Dalla Teoria alla Pratica

Come per l’HTML, potete creare i fogli di stile semplicemente usando l’editor di testo del vostro PC o uno degli editor o ambienti IDE discussi nell’articolo precedente. È possibile inserire le regole CSS in una sezione specifica del file HTML o creare un nuovo file esterno a cui il file HTML fa riferimento. Mentre la prima opzione è ideale per i fogli di stile con un numero limitato di regole CSS, la seconda alternativa presenta vantaggi significativi, quali:

• Il foglio di stile esterno può essere utilizzato e condiviso su più pagine.
• Il foglio di stile esterno verrà memorizzato nella cache del browser, con conseguenti tempi di caricamento più rapidi.
• Ci sarà una chiara separazione tra contenuto e presentazione, lasciando il codice più ordinato e facile da mantenere.

Ora non ti resta che sperimentare e creare un layout attraente per le tue pagine web. L’ultimo tassello del front-end, che si inserisce tra HTML e CSS, è JavaScript, un linguaggio di scripting utilizzato per rendere dinamiche le pagine web e consentire l’interazione con l’utente finale. Tratteremo JavaScript nel prossimo episodio della serie.

<< Leggi l’articolo precedente di questa serie | Leggi l’articolo successivo di questa serie >>