Guida al CSS per EPUB – Il foglio di stile

Nella puntata precedente abbiamo visto come strutturare una pagina, per renderne più semplice la modifica e la formattazione attraverso le regole del CSS. Oggi, invece, cominceremo a vedere cosa siano queste regole del CSS: per poterlo fare, osserveremo prima di tutto la struttura di un foglio di stile. 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. 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 e anche semplici animazioni, per rendere più allegra, vivace o di pessimo gusto la nostra pagina. Dato però che qui mi sto occupando del CSS utilizzabile in uno EPUB, tralascerò molti di questi aspetti più avanzati e mi concentrerò invece sugli aspetti più semplici, ossia quelle che 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 tutti i dispositivi di lettura supporteranno il vostro stile innovativo: dovrete sperimentare sul campo e sperare in bene. Dopo questa introduzione, cominciamo a vivisezionare un foglio di stile. Un foglio di stile, come dicevo, è formato da una serie di regole, tutte strutturate allo stesso modo, cioè così:
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    color: gray;
}
I colori li ho aggiunti io, per semplificare la spiegazione (chiedo scusa ai daltonici), ma per il resto è un esempio di normale regola, come potrete trovarne in qualsiasi foglio di stile. L’elemento che ho colorato in rosso, cioè h2, è il nome del tag a cui questa regola dovrà essere applicata, nel caso specifico h2: il suo nome completo, come lo troviamo in una pagina HTML, sarebbe <h2> ma, come possiamo vedere, nel foglio di stile utilizzeremo solo la parte interna del nome, eliminando < e >. Subito dopo questo elemento, inseriremo due parentesi graffe, al cui interno si troveranno tutte le regole di stile da applicare alla porzione di testo o di pagina racchiusa da quel tag. L’elemento colorato in blu è la proprietà che vogliamo modificare, attraverso questa regola. Ogni elemento possiede un grande numero di proprietà, che vanno dal colore, all'allineamento  ai margini, e così via, e ognuna di queste può essere modificata liberamente da una regola in CSS. Font-family, ad esempio, è la proprietà che determina il tipo di font da utilizzare per un elemento testuale. Ogni proprietà deve essere seguita dai due punti. L’elemento colorato in verde, infine, è il valore che vogliamo assegnare a un certa proprietà. Se stiamo modificando la proprietà color, ad esempio, il valore corrisponderà al nuovo colore da assegnare all'elemento  mentre la proprietà font-family avrà come valore uno o più tipi di font. Ogni valore deve essere chiuso da un punto e virgola, a segnare che quella regola si è conclusa. Oltre che a un tag, una regola CSS può essere applicata anche a una classe, oppure a una combinazione tag + classe, o infine a più tag contemporaneamente (o più combinazioni tag + classe contemporaneamente). Vediamo alcuni esempi.

p {
    color: red;
}
Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p>: in pratica, colora di rosso il testo di tutti i nostri paragrafi, indiscriminatamente.

.paragrafo {
    color: red;
}
Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag che possiede l’attributo class=”paragrafo”, qualunque sia il tipo di tag (<a class=”paragrafo”>, <p class=”paragrafo”>, <span class=”paragrafo”>, eccetera). Come possiamo vedere, il nome di una classe è preceduto da un punto, quando è utilizzato per una regola CSS.

p .paragrafo {
    color: red;
}
Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p>, che possieda l’attributo class=”paragrafo”, cioè a tutti i tag <p class=”paragrafo”>. Se nel nostro testo è presente un tag <p class=”altro”>, la regola non si applicherà, perché è richiesta la presenza contemporanea sia del tag <p> che della classe “paragrafo”.

p, h1 {
    color: red; }
Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p> o di un tag <h1>: come vediamo, per applicare la stessa regola a più tipi di tag, basta separare i loro nomi con una virgola.

p .paragrafo, h1 .titolo {     color: red; }
Questa regola, infine, applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p> con un attributo class=”paragrafo”, o all'interno di un tag <h1> con un attributo class=”titolo”. In questo caso, ogni coppia tag + classe sarà separata da una virgola.
Come si può capire da questi esempi, unendo fra loro più tag e più classi si possono creare regole parecchio complesse e dettagliate, che si applicano soltanto a sezioni ben determinate delle nostre pagine. Tutto ciò può sembrare parecchio confuso, a prima vista, e magari anche a seconda vista, ma è solo una questione di pratica: di fatto, possiamo utilizzare tag e classi come mattoncini Lego e combinarli tra loro come preferiamo, per costruire lo stile più adatto al nostro ebook. Vedremo più avanti alcuni esempi concreti di foglio di stile. Per concludere questa introduzione, c’è un ultimo fattore da considerare, quando lavoriamo sul CSS: l’effetto a cascata. Una normale pagina HTML è composta da un gran numero di tag, incasellati gli uni dentro gli altri: abbiamo tag <div> che contengono tag <h2> e <p>, abbiamo tag <p> che contengono tag <a>, <em> e <span>, e così via. Lo abbiamo visto nella puntata precedente, parlando di come strutturare la pagina. In una struttura di questo tipo, il tag più esterno è il padre, mentre i tag al suo interno sono i figli (oppure madre e figlie, se preferite un approccio femminile: non fa alcuna differenza): se la nostra pagina è <body>   <div class=”pagina”>     <div class=”titolo”>       <h2></h2>     </div>     <div class=”testo”>       <p></p>       <p></p>       <p></p>     </div>   </div> </body>
, il tag <body> sarà il padre di tutti, perché tutti gli altri tag sono al suo interno, ed è quindi il vertice della piramide. Subito sotto di lui c’è il figlio diretto, cioè <div class=”pagina”>, seguito poi dai suoi due figli diretti, ossia <div class=”titolo”> e <div class=”testo”>, e così via, fino alla fine dell’albero genealogico, cioè fino ai tag che non hanno altri tag al proprio interno. Se abbiamo impaginato bene il file, il rientro a inizio riga ci aiuterà visivamente a seguire la piramide dei tag. A cosa serve tutta questa struttura? E cosa c’entra l’effetto a cascata? Semplice: tutti gli attributi che impostiamo per un tag padre si ripercuoteranno anche sui suoi tag figli. Se il tag <div class=”pagina”> ha un font Arial, anche tutti i suoi figli avranno un font Arial. Se non vogliamo che un tag figlio erediti un certo attributo dal padre (o dal nonno), dovremo sovrascrivere quell'attributo, ossia assegnare al tag figlio un valore diverso per quell'attributo. Per cambiare il font, ad esempio, dovremo assegnare al figlio un valore di font-family diverso da quello che erediterebbe dal padre: in questo modo, la sua eredità sarà ignorata e a prevalere sarà il valore che abbiamo assegnato direttamente a quel tag, non quello che riceverebbe dai tag più in alto nella scala gerarchica della pagina. Nella prossima puntata proseguiremo con lo studio delle regole CSS, accompagnate da qualche esempio più concreto.