Come ho scritto in precedenza, il CSS è un insieme di regole, che prescrivono al browser il modo in cui una pagina web debba essere visualizzata. Un foglio di stile è di conseguenza una lista, in cui si elencano le parti di pagina da modificare e il modo in cui modificarle nella visualizzazione. Nel foglio di stile, dunque, scriveremo che i titoli di un certo tipo devono essere mostrati in un certo colore e con una certa dimensione, oppure che le prime lettere di ogni paragrafo dovranno apparire in un determinato modo, e così via. Ovviamente, tutte queste spiegazioni non le potremo dare in italiano (e neanche in inglese), ma utilizzando un particolare codice, che il browser sa interpretare. Questo codice è il linguaggio CSS.

Le regole del CSS non sono difficili, ma possono essere parecchie. In un normale sito, possiamo utilizzare il CSS per svariate operazioni di design, dalle più basilari, come modificare font, colori e inserire immagini di sfondo, fino alle più complesse, come assemblare l’intero layout del sito, distribuendo il contenuto delle pagina su una, due, tre o più colonne, inserendo barre laterali di navigazione, header, footer, ma anche semplici animazioni, per rendere più allegra, vivace o di pessimo gusto la nostra pagina. Dato però che qui mi occupo del CSS utilizzabile in un e-book, mi concentrerò su un sottoinsieme del CSS, ossia le regole più appropriate per un libro e che, in teoria, funzioneranno su qualsiasi dispositivo di lettura e per qualsiasi tipo di e-book. Se volete, però, nulla vi vieta di trattare le pagine del vostro libro come se fossero pagine web vere e proprie e sbizzarrirvi con le più recenti funzionalità aggiunte al CSS, ma sappiate che, al momento, non avrete alcuna garanzia che i dispositivi di lettura supporteranno il vostro stile innovativo: dovrete sperimentare sul campo e sperare in bene.

2-1 Anatomia del foglio di stile

Un foglio di stile è un normale file di testo, con estensione .CSS, al cui interno sono elencate le istruzioni che il browser dovrà seguire, per visualizzare la pagina a cui il foglio di stile è abbinato. Le istruzioni, a propria volta, sono costituite da una lista di elementi da modificare; accanto a ogni elemento, racchiusi tra due parentesi graffe, troveremo una lista degli attributi da modificare e dei valori da assegnare a detti attributi. Per fare un esempio concreto:

Questa è una regola che possiamo comunemente trovare in un foglio di stile. A prima vista, potrebbe apparire piuttosto aliena, ma in realtà è semplice da decifrare.

• h2 è l’elemento della pagina, che sarà modificato dalla nostra regola;
• font-family, text-align e color sono gli attributi di questo elemento, che dovranno essere modificati;
• Verdana, Arial, Helvetica, sans-serif, center e gray sono i valori da assegnare ai suddetti attributi.

Tradotte in italiano, questi sono le istruzioni che la nostra regola dà al browser:

• prendi l’elemento <h2>;
• prendi il suo attributo font-family e assegnagli uno dei valori seguenti (Verdana, Arial, Helvetica, oppure sans-serif, in ordine di preferenza);
• prendi il suo attributo text-align e assegnagli il valore center;
• prendi il suo attributo color e assegnagli il valore gray.

Come risultato, otterremo che il contenuto del tag <h2>, nella pagina a cui il foglio di stile è abbinato, sarà scritto con un carattere Verdana (preferibilmente), sarà allineato al centro e sarà di colore grigio.

Per il momento non ha importanza sapere il significato dei vari attributi e i valori che possono essere assegnati: lo vedremo più avanti, con calma. La cosa importante è memorizzare la struttura di una regola, che è la seguente.

Scriviamo il nome di un elemento, apriamo una parentesi graffa, scriviamo il nome di un attributo, due punti, e il valore da assegnare all’attributo, chiudendo con un punto e virgola. Una volta elencati tutti gli attributi da modificare, chiudiamo la parentesi graffa. Fine della regola. Una coppia attributo + valore è anche definita proprietà.

Un foglio di stile è una serie di regole, tutte strutturate allo stesso modo. Caricando la pagina, il browser o il dispositivo di lettura scorrerà il foglio di stile e applicherà tutte le regole che contiene, dall’alto verso il basso. Di conseguenza, è buona norma partire dalle regole più generali e procedere poi con regole sempre più specifiche, ma su questo torneremo più avanti.

Il contenuto di un foglio di stile, dunque, si presenterà così:

La prima regola si applica al tag <body>, ossia al tag che include tutta la pagina; la seconda regola si applica solo ai tag <h2>; la terza regola solo ai tag <p>, e così via. Come esempio di stile a cascata, ossia di stile ereditario, possiamo vedere che la prima regola assegna un determinato tipo di font al contenuto del tag <body>: questo tipo di font sarà ereditato da tutti i discendenti di <body>, ossia da tutti i tag presenti nella pagina, a meno che non sia specificata una regola apposita, che cambi il tipo di font per quel tag. Questo avviene col tag <h2>, che possiede un proprio tipo, ma è l’unico: tutti gli altri ereditano il carattere assegnato al loro capostipite, ossia <body>.

Tutto ciò suona poco chiaro? È possibile, ma è solo una prima introduzione: ci sarà tempo e modo di approfondire e spiegare meglio il concetto di ereditarietà dello stile, per chi ne avrà bisogno. Per adesso, prestiamo attenzione ai dettagli, ossia:

• un foglio di stile è una sequenza di regole;
• ogni regola è una sequenza di proprietà da applicare a un elemento;
• ogni regola si apre col nome dell’elemento a cui dovrà essere applicata;
• le proprietà da applicare sono racchiuse tra parentesi graffe;
• ogni proprietà è costituita da una coppia attributo+valore;
• ogni attributo è sempre seguito dai due punti;
• l’ultimo valore di un attributo è sempre seguito da un punto e virgola.

Questo è quanto. Non è obbligatorio andare a capo e non è obbligatorio lasciare spazi bianchi, ma è consigliato farlo, perché semplificano la vita a noi umani, mostrandoci già a prima vista la struttura della regola. Scrivere
p{text-align:justify;}
darà lo stesso risultato di
p {
  text-align: justify;
}
ma il secondo stile è decisamente più semplice da leggere e interpretare, soprattutto quando le proprietà sono parecchie.

2-2 Inserire un foglio di stile

Ci sono due modi fondamentali per abbinare un foglio di stile a una pagina: utilizzare un foglio di stile interno, oppure utilizzare un foglio di stile esterno. Per il vostro bene e per semplificare i lavori di modifica, vi invito caldamente a utilizzare un foglio di stile esterno, ma non siete obbligati: la scelta è vostra e il risultato sarà lo stesso. Da un certo punto di vista. Da un altro punto di vista, invece, potreste ritrovarvi a piangere lacrime di sangue, se il vostro e-book è composto da svariati files e dovete modificarli a uno a uno, per cambiare il valore di una regola. A ogni modo, fate pure.

Qualunque sia la scelta, dovremo modificare la parte di pagina compresa tra <head> e </head>, per attribuire il nostro foglio di stile a quella pagina HTML (o XHTML, non fa alcuna differenza). Se optiamo per un foglio di stile interno, dovremo inserire i tag <style> e </style> e scrivere tutte le nostre regole nello spazio tra quei due tag. Ad esempio, avremo:
<head>
  <title>Titolo della pagina</title>
  <style>
    p {
      text-align: justify;
    }
    h2 {
      color: red;
    }
  </style>
</head>
e così via. Di fatto, copieremo o scriveremo tutto il nostro foglio di stile tra i tag <style> e </style>, in ogni pagina del nostro e-book. Se state lavorando su un file XHTML, il tag iniziale dovrà essere <style type=“text/css”>, invece di <style>, ma per il resto non ci saranno differenze.

Nel caso di un foglio di stile esterno, realizzeremo prima di tutto il nostro foglio di stile, salvandolo poi con un formato .CSS, ad esempio come “Stile.css”, un nome poco originale ma semplice da ricordare. Fatto questo, in ogni pagina che utilizzerà questo foglio di stile dovremo modificare la parte precedente il tag </head>, inserendo una riga di questo tipo (se la pagina è in HTML):
<link href="../Styles/Stile.css" rel="stylesheet">
Se invece la pagina è in XHTML, la riga sarà:
<link href="../Styles/Stile.css" rel="stylesheet" type="text/css" />

Ovviamente, il contenuto di href cambierà a seconda dei casi. Nel mio esempio, do per scontato che voi stiate seguendo la struttura ideale per uno EPUB, con le pagine di testo contenute nella cartella Text e il foglio di stile (che, nell’esempio, si chiama “Stile.css”) contenuto nella cartella Styles. Se la struttura è diversa, dovrete modificare di conseguenza i riferimenti, applicando le normali regole dello HTML.