Web design: corso rapido per lavorare con i file CSS / prima puntata

I Cascading Style Sheets (abbreviato CSS) offrono la possibilità, come noto, di assumere massimo controllo sulle pagine web che si desiderano realizzare. Ricorrendo ai CSS si può libramente impostare il “look” di una pagina sistemando ogni elemento con estrema precisione, creare colonne, zone nelle quali inserire particolari testi e così via.

Si chiama stile una particolare regola che permette di stabilire in che modo si intende “formattare” una pagina web; un foglio di stile è semplicemente un insieme di questi stili. I CSS vengono utilizzati accanto alle classiche tag HTML e permettono di fare in modo che queste ultime siano visualizzate in maniera accattivante, coerentemente alle esigenze ed agli obiettivi del web designer.

Nell’attesa che vengano formalizzate le specifiche di HTML5, è possibile utilizzare – in accoppiata con i CSS – i linguaggi HTML 4.01 oppure XHTML 1.0. Quest’ultimo è sempre più utilizzato nella produzione di pagine web: può essere pensato come una versione migliorata dell’HTML originario che pone alcuni limiti, ad esempio, sulle modalità con le quali vengono scritte le varie tag.
Quando si utilizza XHTML si debbono tenere a mente alcune regole fondamentali:

.
Ecco un esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le tag e i relativi attributi debbono essere sempre digitati utilizzando caratteri minuscoli.

Tutte le tag devono essere sempre chiuse. Per creare un paragrafo in XHTML, ad esempio, questo deve iniziare con <p> e chiudersi obbligatoriamente con </p>. Ovviamente, ci sono tag che non necessitano della chiusura: è il caso di <br /> che permette di andare a capo.

Gli attributi per le varie tag devono essere sempre racchiusi tra un doppio apice. Ad esempio, l’indirizzo verso il quale punta una tag anchor deve essere indicato nel modo seguente: <a href=”https://www.ilsoftware.it”> e non <a href=https://www.ilsoftware.it>.

Il futuro del web sarà HTML5 ma, sintanto che le specifiche del linguaggio non saranno ufficializzate, è possibile continuare a lavorare con HTML o XHTML certi che saranno entrambi supportati dai vari browser web in circolazione ancora per molti anni.

I software necessari

Per realizzare pagine web contenenti HTML/XHTML e CSS è necessario munirsi solamente di un editor di testo. Notepad++ (scaricabile gratuitamente da questa scheda) è un eccellente programma per i sistemi operativi Windows distribuito sotto licenza GNU GPL. Tra le sue peculiarità principali ricordiamo l’abilità nell’evidenziare la sintassi dei linguaggi di programmazione e nel colorare le tag HTML oltre agli elementi propri dei CSS.
Notepad++ è disponibile anche in versione “portabile” che non necessita dell’avvio di alcuna procedura d’installazione. Questo file compresso contiene due directory: la cartella denominata ansi contiene la versione destinata ai sistemi operativi Windows più vecchi (Windows 98/ME) mentre la unicode può essere impiegata su tutte le altre piattaforme del colosso di Redmond.

Come si presentano i CSS

Similmente a quanto accade per qualunque software, anche i CSS subiscono modifiche e migliorie nel corso del tempo. La prima versione dei CSS fu introdotta nell’ormai lontano 1996 ed ancora oggi la struttura di base di uno stile, gran parte delle proprietà ed alcuni concetti fondamentali sono sempre utilizzati. Con il rilascio delle specifiche dei CSS 2.0, sono state aggiunte nuove “funzionalità” come, ad esempio, la possibilità di creare fogli di stile capaci di essere sfruttati senza problemi su molteplici monitor e dispositivi. CSS 2.0, inoltre, offre la possibilità di posizionare in modo preciso qualunque elemento sulla pagina web.
CSS 2.1, lo standard oggi universalmente accettato, aggiunge diverse nuove proprietà e corregge alcune problematiche introdotte nella versione precedente.
Dietro l’angolo è ormai CSS 3.0: sebbene il W3C non lo abbia ancora definito in maniera ufficiale, alcuni browser web già hanno iniziato ad abbracciare alcune delle nuove specifiche. Alcuni browser già oggi consentono, ad esempio, di inserire più immagini come sfondo per un unico elemento: si tratta di una possibilità introdotta appunto dai CSS 3.0.
Un buon sito web che permette di aggiornarsi sullo stato di avanzamento di CSS 3.0 è css3.info.

I vantaggi derivanti dall’uso dei CSS

Facendo uso dei CSS ci si potranno mettere alle spalle tag (primo tra tutti, il superatissimo tag <font>) che hanno fatto la storia del web, almeno negli anni ’90. I CSS consentono di raggiungere il risultato visuale desiderato in meno tempo e con minor sforzo: il numero di righe da scrivere per arrivare ad ottenere un prodotto (migliore) rispetto a quello “generabile” usando solo HTML è nettamente inferiore. Come conseguenza, anche la pagina web si caricherà in modo più rapido ossia avrà un “peso” minore.

Predisporre il codice HTML per l’uso dei CSS

Quando si lavora con i CSS è bene focalizzarsi sull’uso di alcune tag di importanza cruciale: <h1> consente di inserire, nella pagina web, il contenuto che si ritiene più importante. E’ possibile pensarlo come un “titolo” che necessita della visibilità maggiore. Le altre tag “header” (ad esempio, <h2>, <h3>) permettono di suddividere il contenuto in più sottosezioni, di importanza minore, ma pur sempre correlate.
Le tag <div> e <span> sono dei “vassoi” vuoti da riempire con i contenuti desiderati. Il <div> è un “blocco” ovvero introduce un accapo sia prima che dopo la tag mentre <span> appare sulla stessa riga, ad esempio come parte di un paragrafo.
La tag <div> viene impiegata per raggruppare un numero variabile di elementi, tutti ricompresi al suo interno: ricorrendo all’utilizzo dei CSS sarà possibile posizionare i blocchi esattamente nelle posizioni desiderate.

Come suggerimento generale, è bene ricordare di non abusare dei blocchi <div>. Alcune tag potrebbero essere spesso più appropriate: si pensi, ad esempio, alla realizzazione di una barra di navigazione. Piuttosto che ad un blocco < div> si potrebbe ricorrere ad una semplice lista puntata (<ul>): in fondo, una barra di navigazione non è altro che una successione di link.

Utilizzando i CSS si dovranno “dimenticare” tag quali <font>, <b> o <i>. Nel caso in cui si volesse davvero evidenziare una parola od una frase si impiegherà la tag <strong> oppure, per usare un’enfasi minore, la tag <em> (i browser visualizzano in corsivo il contenuto di questa tag).
Da evitare l’uso di <table> e l’aggiunta di attributi accessori all’interno della tag <body> (ad esempio quelli che permettono di impostare un colore od una immagine di sfondo, il “look” dei link ipertestuali e così via). Lavorando con i CSS si dovranno inoltre gettare nel cestino tutti gli attributi per l’impostazione e la regolazione dei margini.

Realizzare il primo CSS

Impostare il “tipo di documento” corretto

Nell’introduzione abbiamo fatto cenno all’utilizzo della tag DOCTYPE. Il suo impiego riveste un’importanza fondamentale perché consente di “istruire” il browser web indicandogli quale versione di HTML o di XHTML si sta usando sulla pagina da visualizzare all’utente. Specificando il DOCTYPE scorretto i risultati non saranno quelli attesi: il browser mostrerà la pagina adoperando una sorta di “modalità compatibile” comportandosi così come un prodotto di vecchio stampo e non gestendo correttamente tutti gli stili definiti via CSS.
Il Document Type Definition (DTD) è un documento XML che specifica quali tag, attributi e valori sono utilizzabili con una particolare versione di HTML. L’indicazione di un DTD è sempre contenuta nella tag DOCTYPE presente in testa alla pagina web.

La seguente dichiarazione, posta in testa al codice HTML della pagina web, indica l’utilizzo di HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Quella successiva, invece, fa presente di utilizzare XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Come si vede, le due dichiarazioni sono molto simili, eccezion fatta per il riferimento ad un differente file DTD.
Se, nelle pagine web che si stanno preparando, si devono visualizzare anche dei frame, è necessario specificare un DOCTYPE adeguato (a tal proposito, si veda questa pagina).

Iniziare a lavorare con… stile

Gli stili consentono di definire esattamente le modalità con cui un elemento dovrà apparire nella finestra del browser web. Ogni stile si compone di due parti: la prima consente di specificare l’elemento della pagina web che il browser dovrà “formattare” (il selettore) e le direttive per impostarne il suo “look” grafico. La bellezza dei CSS consiste nel fatto che è possibile formattare, in un sol colpo, decine e decine di elementi presenti in una medesima pagina web: è sufficiente fare riferimento al medesimo selettore.
Ad esempio:

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#737373;
}

Consente di assegnare a tutti i paragrafi di testo contenuti nella pagina web un gruppo di fonti di carattere (a partire dalla prima a sinistra: “Verdana“, nel nostro caso) ed un colore grigio.

Impostazione di un CSS

. Esempio:

<p style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#737373;">

In alternativa, si può impostare un CSS entro la medesima pagina web. Codice come quello riportato poco sopra, che permette di definire il “look” dei paragrafi, deve essere inserito tra le tag seguenti. Esempio:

<style type="text/css">
p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#737373;
}
</style>

Il codice sopra riportato deve essere inserito prima della tag </head>, nell’intestazione della pagina.

.
Anziché ricorrere alla tag <style>, prima della tag </head> si dovrà inserire quanto segue:

<link href="//www.ilsoftware.it/stili.css" rel="stylesheet" type="text/css" />

riassume i concetti visti sinora.
A titolo esemplificativo, per generare i testi di prova visualizzati nella pagina abbiamo fatto ricorso al servizio Lorem Ipsum. Si tratta di un sito web che permette di produrre del testo “segnaposto” utilizzando termini latini: è un ottimo modo per verificare il layout di una pagina grazie alla distribuzione omogenea delle lettere. E’ infatti così nota che, nel campo della tipografia e della stampa, utilizzo di frasi ripetute come “testo di prova” oppure “il testo va inserito qui ingeneri confusione e distragga dall’impostazione grafica della pagina.
Dopo aver selezionato il numero di paragrafi, parole, byte od elenchi, cliccando sul pulsante Genera Lorem Ipsum, si potrà produrre un testo da utilizzare come meglio si crede nelle proprie pagine di prova.

La differenza tra questa pagina e questa consiste, semplicemente, nell’aggiunta della tag <link href="//www.ilsoftware.it/sito.css" rel="stylesheet" type="text/css" /> nell’intestazione (<head></head>).
Come abbiamo spiegato in precedenza, viene in questo fatto uso di un CSS esterno il cui file corrispondente è denominato sito.css.

Si analizzi allora il contenuto del file sito.css.
Attraverso una serie di proprietà, con il CSS è immediato cambiare ad esempio lo sfondo della pagina. Ciò che una volta si faceva agendo sugli attributi della tag <body>, oggi si concretizza semplicemente, ed in tutta comodità, operando con i CSS.
In particolare, come si vede nell’esempio, abbiamo previsto l’impostazione dello sfondo bianco (#FFFFFF) e l’esposizione di un’immagine (questa) ripetuta più volte sull’asse x (background-repeat: repeat-x;):

body {
  background-color: #FFFFFF;
  background-image: url(immagini/sfondo.gif);
  background-repeat: repeat-x;
  padding-top: 150px;
}

Sia per gli header (<h1> e <h2>) che per i paragrafi (<p>) vengono impostati degli stili “ad hoc”.

Quello indicato con .incipit si chiama selettore di classe e permette di impostare uno stile differente per un gruppo di elementi presenti nella pagina web. Ad esempio, si supponga di voler attribuire uno stile differente al paragrafo introduttivo, diverso dallo stile “generico” impostato per tutti i paragrafi <p>. Utilizzando il selettore di classe ed assegnandogli un nome esplicativo, si potrà creare un nuovo stile.
Esaminando il codice HTML di questa pagina, si noti come, alla tag <p> del paragrafo introduttivo sia stato aggiunto l’attributo class="incipit": così facendo si è richiesta l’applicazione dello stile .incipit definito mediante l’uso del file CSS.

Web design: corso rapido per lavorare con i file CSS / prima puntata

Realizzare il primo CSS

Ti consigliamo anche

Scoperto e realizzato il teletrasporto quantistico su cavi in fibra: cos'è e come funziona

Con il Wi-Fi 7, la fibra di Iliad è la migliore per lo streaming e il gaming online

Stop alla tassa sul rame: chi non ha la fibra ottica non pagherà di più

Incredibile, Xiaomi va su Home Assistant in via ufficiale