Il foglio di stile

Sommario:
Questa pagina è un completamento della guida Come creare un sito da zero

Il foglio di stile o CSS (Cascading Style Sheets, in italiano fogli di stile a cascata) merita una pagina dedicata, dato che su di esso si basa tutta la grafica del sito web. 

Metodi di implementazione dello stile:

Cominciamo subito con il dire che ci sono tre modi per implementare le regole di stile in una pagina.
  1. Regole inline nella zona body
  2. Regole caricate nella zona head
  3. Regole richiamate nella zona head
Vediamo la stessa regola applicata nelle tre diverse maniere. Immaginiamo di dover inserire le caratteristiche per il testo di un contenitore qualsiasi....

Regola inline:
<div style="text-color: black; test-size: 1.2em">Testo</div>


Stessa regola caricata nella zona head:
<style>
div {
text-color: black;
test-size: 1.2em;
      }
</style>


Stessa regola posta in un file esterno che chiameremo "style.css":
div {
text-color: black;
test-size: 1.2em;
      }

..e richiamato nella zona head con questa stringa:
<link rel="stylesheet" type="text/css" href="style.css" />


Il metodo inline è il metodo più diretto e viene utilizzato per stabilire piccole regole immediate, o per sovrascrivere, in uno specifico campo della pagina, una regola generale impostata nel foglio di stile.

Il metodo di caricamento delle regole nella zona head della pagina viene utilizzato quando le regole non sono molte e riguardano esclusivamente quella data pagina. Da notare che in questo caso le regole devono essere racchiuse tra i tag <style></style>.

Il metodo largamente più utilizzato è quello del foglio di stile esterno, perchè porta molteplici vantaggi, sia per un discorso di ordine e chiarezza del codice html, sia perchè permette di effettuare molto facilmente le modifiche che interessano una pagina, o l'intero sito.

Differenza tra id e classe:

Abbiamo fatto l'esempio su un div generico, ma le impostazioni di stile, quasi sempre, riguardano elementi ben definiti.
Oltre agli elementi già chiaramente definiti che sono i principali:

head
body
header
nav
aside
footer

Nonchè i vari titoli: h1 h2 h3 h4....

Possiamo creare i nostri contenitori personali utilizzando i div. Per distinguere e indicare un div in maniera inequivocabile si usano gli ID, o le CLASSI.
La differenza tra un id e una classe sta nel fatto che l'id identifica un solo elemento, mentre la classe identifica una categoria di elementi che possono avere le stesse caratteristiche.
Se vogliamo, quindi, definire le regole per determinati contenitori che intendiamo utilizzare con frequenza nelle nostre pagine, utilizzeremo le classi.

Nel codice html, scriveremo così:

<div class="pippo">contenuto del div</div>

Nel codice del file css esterno scriveremo così:

.pippo {
   color: black;
}

"Da notare il puntino prima della parola pippo"

Cosa abbiamo stabilito? Abbiamo stabilito che il testo contenuto all'interno di qualunque div identificato con la classe "pippo" deve essere di colore nero (i colori possono essere definiti con il loro nome inglese o con il loro codice web. Es: black=#000).
 
Se avessimo voluto dare la stessa regola ad un div specifico e unico e non ad una categoria, avremmo usato l'ID, in questo modo:

<div id="pippo">contenuto del div</div>

....e nel codice css del file esterno avremmo scritto:

#pippo {
   color: black;
}

Come vedete, al posto del puntino inziale ora c'è un cancelletto. Nel foglio di stile, quindi, il puntino identifica una classe e il cancelletto identifica un id.
Cosa abbiamo stabilito? Che il div "Pippo" e solo lui in quella pagina deve avere il testo di colore nero.
(Io sto usando una sola regola come esempio, ma, naturalmente, è possibile inserire quante regole si desidera).
Gli id e le classi possono essere applicati non solo ai div, ma a qualunque tipo di contenitore (span, p, ecc) nonchè, se necessario, ai contenitori principali.
È possibile applicare più classi insieme. Esempio:

<div class="pippo carlo mario">

A che serve? Serve ad unire insiemi di regole differenti. Per esempio, se la classe "pippo" stabilisce che il colore del testo deve essere nero e la classe "carlo" dice che deve essere di dimensione 1.4em, mettendo insieme le due classi avremo il testo nero e di dimensione 1.4em. Questo è un esempio banale e, come ho detto prima, le regole possono essere messe insieme nella stessa classe, ma, in taluni casi, la possibilità di unire classi differenti può tornare utile.

Per ogni id o classe è poi possibile anche applicare regole specifiche agli elementi che sono al loro interno. Per esempio, se vogliamo che solo i titoli h2 contenuti in un determinato div abbiano un certo colore, scriveremo la regola, nel foglio di stile, in questo modo:
#pippo h2 {
color: red;
}


NOTA: è sconsigliato utilizzare numeri nei nomi che identificano ID e classi.
È bene, per praticità, che il foglio di stile rispecchi l'ordine delle sezioni del codice html, quindi si inzierà con le regole del body, per poi passare all'header e via di seguito.

Il font:

Se non impostate il tipo di font il browser utilizzato dai visitatori utilizzerà il font di default presente nel sistema del computer in uso. Se impostate il tipo di font, ma questo non è presente sul computer del visitatore, ugualmente il browser utilizzerà un font di default. Per evitare che questo accada ed essere certi che tutti visualizzino il sito con il font che scegliete per il vostro layout, dovete scaricarlo ed includerlo, oppure importarlo.
Ecco i due metodi:
Metodo con il font scaricato e implementato nel sito:
Premessa: questo metodo garantisce lo stesso aspetto dei caratteri in tutti i browser. Pe questo motivo, dopo aver scaricato il font da Google font ( o da altri siti, ce ne sono diversi), è necessario procedere ad una conversione per ottenere i diversi formati supportati dai vari browser. Il procedimento è quello che segue:

    1.    Scelgo il font da Google font e lo scarico: https://fonts.google.com/
    2.    Vado sul convertitore: https://everythingfonts.com/font-face e carico il font da convertire.
    3.    Scarico il pacchetto ottenuto.
    4.    Apro lo zip.
    5.    Copio e incollo la cartella contenente i formati del font dentro la cartella "styles" del sito.
    6.    Collego il font come segue:

Nella prima riga del foglio di stile (.css) incollo queste impostazioni:

@font-face {
    font-family: 'DroidSansMono';
    src: url('fonts/DroidSansMono.eot');
    src: url('fonts/DroidSansMono.eot') format('embedded-opentype'),
         url('fonts/DroidSansMono.woff2') format('woff2'),
         url('fonts/DroidSansMono.woff') format('woff'),
         url('fonts/DroidSansMono.ttf') format('truetype'),
         url('fonts/DroidSansMono.svg#DroidSansMono') format('svg');
}


In "body" incollo la stringa riportata piu` sotto per entrambi i metodi.

Metodo con font importato:

Vado su Google font
Prelevo la stringa di importazione simile a quella che segue e la incollo nella prima riga del foglio di stile (.css):

@import url('https://fonts.googleapis.com/css?family=Droid+Sans');

In alternativa, è possibile richiamare il font nella sezione head della singola pagina utilizzando questa stringa:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Droid+Sans" />


Richiamo del font per entrambi i metodi:

Per indicare il font di default del sito, nelle impostazioni di "body" del foglio di stile (.css) incollo questo comando:

font-family: 'Droid Sans', Arial, sans-serif;

Il testo contenuto in tutte le pagine del sito collegate a questo foglio di stile verrà letto e riprodotto dal browser utilizzando il font "Droid Sans".
È possibile importare più font e impostare una regola generale a livello di body, per poi applicare regole specifiche per altre sezioni. Se, per esempio, impostassimo un font differente per la sezione header, sarebbe solo il testo contenuto nell'header delle pagine a utilizzare quel font, mentre le altre sezioni continuarebbero ad utilizzare quello di default impostato nel body. Questo vale per qualunque sezione e anche per qualunque contenitore definito.
La regola specifica di una contenitore "figlio" sovrascrive e annulla quella del contenitore "genitore".

NOTA: il metodo di importazione è più semplice, ma penalizza le pagine del sito in velocità di caricamento.

Regole utili:

Ci sono alcune regole utili e consigliate che vanno inserite nella parte alta del foglio di stile.

Una regola utile è questa:
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box
}

....che serve a indicare che qualunque bordo venga applicato agli elementi contenuti nella pagina dovrà restare nelle dimensioni originali dell'elemento stesso e non variarle. Se, per esempio, caricherete un'immagine di 200x200px e vorrete applicare un bordo di 4px, non vedrete le dimensioni diventare 208x208px, ma esse resteranno di 200x200px magrado il bordo aggiunto. Questo si rivela molto utile per mantenere inalterato l'equilibrio tra i diversi elementi che compongono la pagina.

Nelle impostazioni di stile del body è importante aggiungere queste regole:
body {
-webkit-text-size-adjust:100%;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
}

....che servono a mantenere la dimensione del testo corretta su tutti i dispositivi mobili.

Un'altra regola utile è questa..
a {word-wrap: break-word;}

..che serve ad indicare di "rompere" i link troppo lunghi nella visualizzazione su mobile. Senza questa regola, i link non vengono mai interrotti e, se superano la larghezza dello schermo, escono dallo stesso, causando un'oscillazione orizzontale.

Regole di interesse soggettivo:

Questa regola serve ad impedire l'evidenziazione del testo.
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;


I vendor prefixes:

Con vendor prefixes si definiscono le differenti sintassi tramite le quali i vari browser supportano le regole del linguaggio css. Non tutte le regole css devono essere scritte in modo differente per i diversi browser. Per fortuna, la maggior parte delle regolo sono supportate da tutti senza problemi.
In questo articolo, trovate un comodo elenco a riguardo: http://shouldiprefix.com/#min-width.

Ecco l'esempio di una regola che richiede i prefissi:

.example {
 -webkit-transform: rotate(30deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
 -ms-transform: rotate(30deg); /* IE 9 */
 transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */
}

Aggiungere manualmente, ogni volta, i prefissi necessari diventerebbe un lavoro non da poco. Per ovviare al problema ci sono due soluzioni.
  • Si può usare un javascript e nello specfico Prefix Free.
  • Si può usare un tool online per aggiungere in automatico i prefissi necessari.
Usando il javascript possiamo dimenticarci dei vendor prefixes, ma è pur sempre uno script che non giova alla velocità del sito e poi dipendere da uno script per le regole basilari della grafica non è il massimo.

Il tool online richiede un pochino di lavoro in più da fare e il codice css viene leggermente allungato dai prefissi ripetuti, ma il risultato è stabile e sicuro.

Posso indicarvi questo servizio: https://autoprefixer.github.io/

Le media querie:

Alla fine del foglio di stile si trovano le media querie.
Cosa sono le media querie? Sono lo strumento che permette di definire le regole del foglio di stile in base alla larghezza dello schermo del dispositivo che sta visualizzando la pagina web. In pratica, le media querie ci permettono di rendere ogni pagina del sito web responsive, vale a dire adattabile ai dispositivi mobili.
Ci sono sottili differenze nella sintassi utilizzata per introdurre le media querie, ma non ritengo sia il caso di dilungarsi in merito. La configurazione comune è questa:
@media screen and (max-width: 767px) {
    .pippo{
        font-size: 0.8em;
    }
}

Con questa regola, stiamo dicendo al browser che quando il sito viene visualizzato su un dispositivo il cui schermo è largo da 0px fino a 767px, la dimensione del testo deve essere di 0.8 em.
Allo stesso modo possiamo impostare qualunque regola per qualunque elemento del foglio di stile e per qualunque larghezza dello schermo.

È possibile, se necessario, anche impostare un intervallo di larghezza, cioè una larghezza massima e una larghezza minima dello schermo, in questo modo:
@media screen and (max-width: 767px) and (min-width: 450px) {
    .pippo{
        font-size: 0.8em;
    }
}

Bene, siamo arrivati in fondo al nostro foglio di stile riassunto in maniera sintetica. Con la pratica e l'esperienza ne conoscerete le molte regole e le infinite possibilità di personalizzazione.

NOTA: anche per il foglio di stile esistono dei tool online per verificarne la corretta compilazione. Vi consiglio questo: http://csslint.net/.


Ti è stato utile questo argomento?
Si
No



Elenco argomenti di questa guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti