Fogli di stile

I fogli di stile a cascata (o CSS - Cascading Style Sheets) permettono di cambiare l'aspetto della pagine che abbiamo creato. In effetti, per il momento le nostre pagine saranno tutte di un noioso testo nero su sfondo bianco.

I fogli di stile permettono di specificare una serie di regole che vengono applicate una dopo l'altra ("a cascata"), a determinati elementi (i vari comandi HTML). È importante sapere che, per ogni comando, è possibile assegnare:

Una o più classi, tramite l'attributo class. Ad esempio, <div class="verde"> costruisce una "scatola" con la classe "verde", mentre <div class="verde grande"> assegna a questo box le classi "verde" e "grande".
Un identificatore (id), che deve essere unico ed apparire un'unica volta in tutta la pagina. Ad esempio, possiamo identificare un paragrafo con <p id="principale">.

Non è necessario specificare questi attributi nel tag di chiusura, che rimarranno </div>, </p>, ecc.

La sintassi del file CSS si compone di una serie di regole, e ricorda un po' quella del C (anche i commenti si fanno nello stesso modo). Proviamo a creare nel nostro repository GitHub un file stile.css con il seguente contenuto:

/* Questa regola si applica a tutti i tag body, anche se in ogni 
   documento ne appare uno solo, e ci permette di impostare lo
   sfondo. */
body {
    background-color: red;
}

/* La sintassi con il punto permette di identificare tutti i
 * comandi che hanno una certa classe specificata. In questo
 * caso impostiamo il colore del testo. */
.verde {
    color: green;
}

/* Infine, possiamo selezionare il tag con un certo ID utilizzando
 * il simbolo del cancelletto. Ora impostiamo della spaziatura. */
#principale {
    margin-left: 20px;
    margin-right: 20px;
}

Come caricare il file CSS

Se provate a salvare il file .css, vi accorgerete che la vostra pagina non è cambiata per nulla. Infatti, non abbiamo scritto da nessuna parte nel nostro file .html che vogliamo usare questo stile.

Dopo aver creato il file CSS come descritto sopra, si inserisca fra i tag <head> e </head> la linea

<link rel="stylesheet" type="text/css" href="stile.css" />

A questo punto si dovrebbe vedere lo sfondo diventare rosso. Si provi ad assegnare le classi definite (o l'ID) ad alcuni elementi, e vedere come cambia l'effetto.

Altri modificatori CSS

Nei file CSS è possibile inserire una grande quantità di proprietà, non tutte di facile comprensione; trovate una lista delle principali qui. Alcune di particolare interesse sono:

Proprietà	Significato
width, height	Larghezza e altezza di un elemento, possono essere specificate in px (es. 300px)
min-width, min-height	Larghezza e altezza minima di un elemento, possono essere specificate in px (es. 300px)
color	Colore del testo
background-color	Colore dello sfondo
background-image	Immagine da inserire come sfondo
font-size, font-weight, font-variant	Controllano dimensione e stile del testo. Vedere qui, qui, e qui per maggiore dettagli

Come centrare degli elementi

Supponiamo di voler vedere il contenuto della nostra pagina centrato rispetto alla finestra del browser. Come ottenere questo risultato?

Possiamo procedere in due step:

Inseriamo tutto il contenuto da centrare (ad esempio, tutto quello contenuto fra <body> e </body> all'interno di una scatola, aggiungendo un blocco DIV. Diamo a questo DIV un'id univoco, con un risultato simile al seguente:
```
<body>
  <div id="contenitore">
    [ ... ] contenuto della pagina [ ... ]
  </div>
</body>
```
Aggiungiamo una regola CSS per importare la larghezza di questo blocco, e per fare in modo che i margini dai bordi vengano calcolati in automatico per centrarlo. Qualcosa del genere:
```
#contenitore {
  width: 800px;
  margin: auto;
}
```

A questo punto il nostro blocco sarà centrato; possiamo aggiungere un'altezza minima (min-width), dei bordi (border), uno sfondo, ecc.