Capitolo 6: CSS (fogli di stile)

CSS: cosa sono

CSS che sta per Cascading Style Sheets ovvero fogli di stile a cascata è un potente linguaggio standard del Consorzio internazionale del web [W3C].
Questo linguaggio ha lo scopo di abbellire l'aspetto visuale ed estetico di una pagina web. Soltanto questo linguaggio ci permette di separare il contenuto dalla presentazione visiva, cosa fondamentale per la gestione delle pagine web.

  1. Selettore universale * {color: red;} assegna il colore rosso a tutti gli elementi della pagina;
  2. Selettore di tipo o di elementi h1 {color: green;} assegna il colore verde a tutti i tag h1 in quella pagina;
  3. Selettore di classe span>.testobianco {color: white;} verrà applicato solo ai paragrafi che con questa classe
  4. Selettore di id #titolo {color: blue;} si applica ai tag o ai blocchi che hanno questo id.
Noi finora ci siamo occupati esclusivamente del contenuto della pagina e ciò che abbiamo realizzato è ottimo soltanto per alcune categorie di utenti, ma per altre categorie manca tutto l'aspetto grafico, colori, sfondi, dimensioni eccetera.
Ebbene ora con i css impareremo le regole essenziali per esprimere la nostra fantasia e gusto estetico attraverso le pagine da noi realizzate.
Prenderemo spunto da questa guida ufficiale: Guida CSS di base Per una guida completa dei "layout" dei siti web romando a questa guida:
layout dei siti con CSS
tuttavia ritengo non molto producente a questo livello scendere molto nei dettagli dei layout.

Elementi e regole

Prima di iniziare fissiamo alcuni concetti teorici. Rivisitiamo una figura relativa ai CSS

Vedendo questa figura accenniamo alle parentele tra elementi, si avete capito bene parentele tra i vari elementi: html è il padre di tutti gli elementi; head e body sono figli di html; body è anche fratello di head e viceversa; h1, div, p sono figli di body e fratelli tra loro; div è anche adiacente ad h1. Ma non diventiamo matti, sappiamo che ci sono e se serviranno ne parleremo più in dettaglio, per ora ci siamo soffermati anche troppo. Introduciamo i tre tipi di elementi:

  1. Elementi a livello di blocco (block level elements): ci bastano quelli che già conosciamo: <div>, <p>, <>, <h2> <h3>, <h4>, <h5> <h6>
  2. elementi in linea (inline level elements): conosciamo solo <span> , gli altri li vedremo strada facendo;
  3. elementi rimpiazzati (replaced level elements), li vedremo più avanti.

Un CSS è costituito da una serie di regole con le quali si indica come deve essere rappresentato il contento della pagina web.
Questa immagine esplicativa ci mostra il formato di una regola.

I selettori sono gli elementi (oggetti o blocchi) cui una certa regola css deve essere applicata, ovvero gli elementi che vediamo nella figura precedente, o meglio ancora i vari tag che usiamo nel codice HTML per inserire i nostri contenuti.
I selettori possono essere:

[Più difficile a dirsi che a farsi!] Le proprietà dei selettori sono molteplici, più o meno intuitive. Gestione del testo come il colore, carattere, formattazione; colore, sfondo degli elementi; larghezza, margini, padding degli elementi posizionamento degli elementi nella pagina; stile e marcatori delle liste; eccetera ...
Le regole CSS vanno messe nella sezione style del documento HTML:
<style>
... regole css qui...
</style>

Lettura regole e teoria

Scrivo le regole CSS da applicare al mio esempio della lezione precedente.
Come prima regola ogni volta che facciamo una pagina web azzeriamo le proprietà dell'elemento html e body:
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }
 Questo per evitare che ogni browser applichi i propri valori di default che sono diversi l'uno dall'altro. Le linee orizzontali che erano funzionali nel caso senza CSS, ora non servono per cui diciamo al browser di non mostrarle:
hr { display: none; }
decido un colore di sfondo per la sezione della testata:
div#testata { background: #3399ff; }
posiziono il blocco dei contenuti a sinistra:
div#contenitore {float: left; width: 100%; }
Metto la sezione dei menù nella colonna di sinistra e gli do una larghezza del 23% rispetto alla larghezza totale della pagina:
div#col_sx {float: left; width: 23%; padding: 0 2% 0 2%; background: #ff9933; }
La sezione dei contenuti principali la metto affiancata alla colonna dei menù con una larghezza del 69% rispetto al totale della pagina:
div#col_cx {float: left; padding: 0 2% 0 2%; width: 69%; }
Impongo alla sezione piede di pagina di posizionarsi a sinistra della pagina ma decisamente sotto ai blocchi precedenti; assegno una posizione centrale al testo ed indico anche un colore di sfondo:
div#piepagina {clear: left; width: 100%; text-align: center; background: #3399ff; }

Ora scrivo le regole per gli elementi che sono all'interno dei cinque blocchi principali.
div#testata h3 { margin: 0; background: #3399ff; text-align: center;}
div#testata h3 span { font-size: 75%; background: #3399ff;}
div#col_sx h5 {margin-top: 15%; }
div#col_cx h5 {margin-top: 5%; }
div#piepagina h4 { margin: 0; background: #3399ff; text-align: center;}
div#col_cx p { color: #0000ff; }
div#col_cx p + p { color: #ff00ff; }
div#col_cx p + p + p { color: #0000ff; }
span { background: #00ff00; }
 Applicando queste regole ho ottengo questo risultato
Bello eh! Tutta un'altra cosa! Si comincia a vedere la nostra creatività.
Copiate ed incollate queste regole nell'esempio da voi realizzato, cambiate tutte le proprietà o valori che volete e vediamo cosa succede.
Questa è una lezione tosta, abbiate pazienza, sarete ricompensati vedendo il lavoro ultimato.
Buon lavoro!
Sono sempre accette richieste di chiarimenti anche via email o su whatsapp!
Nella prossimo paragrafo vedremo un poco di teoria.