Un sito da zero

IL foglio di stile

Sommario:
Questa pagina è parte 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 applicate a uno o più elementi nella zona body
  2. Regole caricate nella zona head della singola pagina
  3. Regole richiamate nella zona head tramite collegamento con un file css esterno
Vediamo la stessa regola applicata nelle tre diverse maniere. Supponiamo di dover inserire alcune caratteristiche per il testo di un div contenitore ....

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


Stessa regola caricata nella zona head, applicando al div una classe a nostra scelta per identificarlo, per esempio la classe "test":
<style>
.test {
text-color: black;
test-size: 1.2em;
      }
</style>


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

Il file esterno style.css deve essere 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 applicare piccole regole ad un determinato elemento della pagina, o per sovrascrivere una regola generale impostata nel foglio di stile.

Il metodo di caricamento delle regole di stile 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>.

Sia le regole inline che quelle caricate nella zona head, sovrascrivono sempre eventuali regole contrastanti, applicate al medesimo elemento, contenute nel foglio di stile esterno.

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

Elementi contenitori

Abbiamo imparato a conoscere i contenitori principali della pagina che sono:

head
body
header
nav
aside
footer

Possiamo, però, anche creare altri contenitori secondari. Esistono diversi tipi di elementi contenitori: Per identificare un contenitore a cui applicare determinate regole di stile, si usa un id, o una class.

Differenza tra id e class

La differenza tra id e class sta nel fatto che l'id identifica un solo elemento in maniera univoca e solo a lui verranno applicate determinate regole, mentre la class identifica una categoria di elementi che possiedono le stesse regole di stile.
Se vogliamo, quindi, definire delle regole di stile comuni a determinati elementi di una o più pagine del sito, utilizzeremo una class.

Nel codice html, scriveremo per esempio, 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).

Così come al div, possiamo attribuire una classe anche a immagini, o titolo, o paragrafi ecc..
Esempio:
<img class="pippo" src="qui il percorso dell'immagine">

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 alla stessa classe, o allo stesso id).

Gli id e le classi possono essere applicati a qualunque elemento (span, p, img, a, ul, li, h1, h2, ecc).

È possibile anche applicare più classi allo stesso elemento. 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.

In ogni contenitore padre è possibile, inoltre, applicare regole specifiche agli elementi figli. 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;
}

Elementi, o classi e ID a cui vogliamo applicare una o più regole comuni possono essere raggruppati separandoli con una virgola.

Esempio:
nav, #tizio, .pippo {
color: red;
}
Abbiamo indicato che il testo contenuto nell'elemento principale nav e il testo nel contenitore con id="tizio" e il testo in tutti i contenitori con class="pippo" sarà di colore rosso.

NOTA: classi e ID non possono essere identificati usando solo numeri.
È bene, per praticità e chiarezza, che le regole contenute nel foglio di stile rispecchino l'ordine delle sezioni del codice html dall'alto verso il basso. Inizieremo, quindi, con le regole del body, per poi passare all'header, ai vari div e via di seguito fino al footer.

Gli elementi contenitori utilizzati come generici, possono essere considerati dei selettori. Per esempio, la regola:
div {
color: red
}

Indica che il testo contenuto in tutti i div della pagina deve essere di colore rosso.

I selettori

I selettori, come dice il termine, servono per selezionare gli elementi HTML delle pagine web che vogliamo modificare. Esistono molti selettori CSS che permettono di selezionare gli elementi con precisione per applicare lo stile in modo mirato.
Vediamo quali sono:

Asterisco * 

Selettore universale. Le regole indicate con questo selettore verranno applicate, indistintamente, a tutti gli elementi della pagina.
Esempio:
*{
color: #000;
font-size: 2.0rem;
}

Selettore di attributo

Consente di definire una regola di stile per tutti gli elementi che posseggono un determinato attributo.
Mettiamo, per esempio di voler dare il colore rosso a tutti i link che si aprono in una nuova scheda del browser e posseggono, quindi, l'attributo target="_blank".
Esempio:
[target="_blank"] {
  color: red;
}

<a href="" target="_blank">prova attributo</a>

Risultato: prova attributo

NOTA: al selettore di attributo possono essere applicate impostazioni più specifiche. Per approfondimento: https://www.w3schools.com/css/css_attribute_selectors.asp

Pseudo classe

È una parola, preceduta da due puntini, che definisce uno stato dell'elemento e che si aggiunge ad un selettore, o ad un id, o ad una classe per impostare delle regole valide solo quando l'elemento si trova in quello stato.

Esempio 1:
a:visited {
  color: blue;
}

Colore dei link già visitati.

Esempio 2:
a:hover {
  color: red;
}

Colore dei link al passagio del mouse.

Esempio 3:
li:first-child {
  color: red;
}

Il primo list-item di ogni lista avrà il testo di colore rosso.
Risultato:
Elenco di tutte le pseudo classi e approfondimento: https://www.w3schools.com/css/css_pseudo_classes.asp

Pseudo elemento

Viene utilizzato per modellare le parti specificate di un elemento.
Gli pseudo elementi sono questi:

::before
Esempio:
p::before {
content: "prima ";
color: red;
}

La parola "prima" verrà aggiunta prima del testo di ogni paragrafo e sarà di colore rosso.
Risultato:
prima testo del paragrafo

::after
Esempio:
p::after {
content: "dopo ";
color: red;
}

La parola "dopo" verrà aggiunta dopo il testo di ogni paragrafo e sarà di colore verde.

Risultato:
testo del paragrafo dopo

NOTA: sia con before che con after, è possibile lasciare vuoto il valore di "content" per definirlo solo attraverso le regole di stile.


::first-letter
Esempio:
p::first-letter {
color: red;
}

La prima lettera del testo di ogni paragrafo sarà di colore rosso.

Risultato: Testo del paragrafo

::first-line
Esempio:
p::first-line {
color: red;
}

La prima riga del testo di ogni paragrafo sarà di colore rosso.

Risultato:
Prima riga
Seconda riga

::selection
Esempio:
p::selection {
color: red;
background: yellow;
}

Quando l' utente selezionerà il testo di un paragrafo, la selezione avrà sfondo giallo e il testo diventerà di colore rosso.
Omettendo la p di paragrafo e scrivendo solo ::selection, la regola verrà applicata a tutta la pagina.

I simboli nei selettori

> figlio diretto, indica che le regole devono essere applicate solo all'elemento figlio diretto dell'elemento contenitore.
Esempio:
#container > p { 
color: red;
}

Il primo paragrafo p figlio diretto del contenitore #container avrà il testo di colore rosso.

+ fratelli adiacenti, ci devono essere due elementi figli dello stesso contenitore padre, che non devono essere necessariamente dello stesso tipo (due div, o due paragrafi, oppure un div e un paragrafo ecc), purchè uno di seguito all'altro. Al secondo elemento si applicheranno le regole di stile.
Esempio:
<style>
div + p {  
  color: green;  
}
</style>

<div>  ->contenitore padre
  <div>  ->div primo figlio
         uno
  </div>
  <p>due</p> ->p secondo figlio
</div>

Risultato:
uno
due

~ combinatore di fratelli adiacenti, come il precedente, ma le regole saranno valide non solo per il secondo fratello, ma anche per i fratelli successivi, purchè seguano immediatamente il primo fratello a cui vengono applicate.
Esempio:
<style>
div ~ p {  
  color: green;  
}
</style>

<div> ->contenitore padre
  <div> ->div primo figlio
    uno
  </div>
  <p>due</p> ->p secondo figlio
  <p>tre</p> ->p terzo figlio
</div>


Risultato:
uno
due
tre

Il font

Se non impostate il tipo di font il browser del visitatori utilizzerà il font di default 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. Scelgo un convertitore online che dia un risultato completo, come: https://everythingfonts.com/font-face
  3. Carico il font da convertire.
  4. Scarico il pacchetto ottenuto.
  5. Apro lo zip.
  6. Copio e incollo la cartella contenente i formati del font nella stessa cartella che contiene il file CSS del sito.
Collego il font come segue:

Nella prima riga del foglio di stile (.css) incollo le impostazioni fornite dal programma, che, per essere complete, devono essere come queste:
@font-face {
    font-family: 'DroidSansMono';
    src: url('fonts/DroidSansMono.eot');
    src: url('fonts/DroidSansMono.eot?#iefix') 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');
         font-display: swap;
}


La regola "font-display: swap;" è consigliata da Google per rendere immediatamente visibile il testo e non rallentarlo aspettando il caricamento del font.
Per maggiori informazioni: https://developers.google.com/web/updates/2016/02/font-display

Richiamo il font come descritto più sotto per entrambi i metodi.

Metodo con font importato:

Vado su Google font (o altro sito di propria scelta).
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" />

In questo caso, naturalmente, l'impostazione avrà valore solo per quella pagina e non per l'intero sito.


Richiamo del font valido 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.

Per le dimensioni del font, leggi: "Il testo e il font".

NOTA PER GLI SVILUPPATORI CHE USANO FIREFOX: Aprendo le sottopagine del sito da desktop, alcuni font scaricati potrebbero non venire interpretati a causa di alcuni blocchi di sicurezza, pur funzionanando perfettamente nella visualizzazione online. In questo caso, la soluzione è digitare about:config nella barra degli indirizzi di Firefox e cercare la voce "security.fileuri.strict_origin_policy", doppio click sulla preferenza (true di default) per cambiarla in "false" (per info: https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Same-origin_policy_for_file:_URIs).


Regole utili

Regole di interesse generale:

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. S e, 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 per html e body, importante inserire queste regole:
html, body {
margin: 0;
padding: 0;
}


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 {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
}

..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.

Per le immagini, importante questa regola:
img {
    max-width: 100%;
    height: auto;
    width: auto;
    /* for ie 8 */
    border: 0;
}

.... affinchè le immagini non superino la larghezza del loro contenitore e non abbiano il bordo intorno che le versioni vecchie di IE mettono di default.

Regole di interesse soggettivo:

Questa regola serve ad impedire l'evidenziazione del testo all'interno di un determinato contenitore.
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Il contrario serve ad evidenziare il contenuto al click:
div {
-webkit-user-select:all;
-moz-user-select:all;
-ms-user-select:all;
user-select:all;
}

Margin e padding:

Il margin è lo spazio che separa il contenitore (per es. un div) dalla zona circostante.

Il padding è lo spazio che separa il contenuto dal margine del contenitore. Frequentemente usato, per esempio, per distanziare un contenuto testuale.

margin e padding
Per il margin e per il padding valgono le stesse regole.

Padding e margin si impostano in base alla posizione posizione: top (in alto), bottom (in basso), left (a sinistra), right (a destra).
I valori vengono impostati in questo modo (per gli esempi userò il padding):

-Se ci sono tutti e 4 i valori, si interpretano così:

padding: 10px 20px 15px 5px;
equivale a:

padding top 10px
padding right 20px
padding bottom 15px
padding left 5px

-Se ci sono solo 3 valori, si interpretano così:

padding: 10px 20px 15px;
equivale a:

padding top 10px
padding right e left 20px
padding bottom 15px

-Se ci sono solo 2 valori, si interpretano così:

padding: 25px 50px;
equivale a:

padding top e bottom 25px
padding right e left 50px

-Se c'è un solo valore, tutti i lati dell'elemento avranno lo stesso padding secondo il valore indicato:

padding: 20px;

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. 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 queries:

Alla fine del foglio di stile si trovano le media queries. Dato che l'argomento è importante e necessita di attenzione, vi rimando alla guida specifica Il sito responsive e le media queries



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/.


Forzare la visualizzazione degli aggiornamenti:

Non si finisce mai di migliorare il proprio sito e può capitare di dare qualche ritocco all'aspetto anche dopo la pubblicazione.
Per fare in modo che le modifiche siano immediatamente visualizzate dai visitatori, è possibile forzare il browser a ricaricare il foglio di stile, bypassando le eventuali impostazioni della cache.
Per fare questo, basta aggiungere una piccola stringa al collegamento, così:

<link rel="stylesheet" type="text/css" href="style.css?V=1.0" />

Cambiando, ad ogni modifica, il numero della versione (1.1, 1.2, 1.3 ecc) il css verrà ricaricato e aggiornato dal browser dei visitatori.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Elenco argomenti di questa guida:
Altro di interesse

Leggi anche: Un sito già pronto per te

Torna alla pagina principale:Creare un sito da zero ->>
Continua con....Includere css e js ->>