CSS

Con l’HTML abbiamo definito la struttura del contenuto. Da qui in poi ci occupiamo dell’aspetto: colori, spaziature, layout. Il linguaggio è il CSS (Cascading Style Sheets).

Collegare un foglio di stile

index.html

<head>
    <meta charset="UTF-8">
    <title>La mia pagina</title>
    <link rel="stylesheet" href="stile.css">
</head>

<link rel="stylesheet" href="..."> va sempre nel <head>. Da qui in poi lavoriamo in un file separato, stile.css.

Note

Esistono altri modi per includere CSS nelle proprie pagine web:

CSS interno: Consiste nel mettere un tag <style> all’interno della sezione <head> e lì dichiarare tutte le regole CSS della pagina.

CSS inline: Usa l’attributo style direttamente nei tag HTML (<p style="color: red;">). Si applica solo a quel tag specifico.

Evitali entrambi: mescolano struttura e stile, e diventano ingestibili appena la pagina cresce. Un file .css separato è sempre la scelta giusta.

Sintassi CSS di base

File stile.css

selettore {
    proprietà: valore;
    proprietà: valore;
}

Esempio concreto:

p {
    color: blue;
    font-size: 18px;
}

Questa regola dice: “tutti i paragrafi (<p>) avranno testo di colore blue e dimensione 18 pixel”.

Selettori principali

/* Selettore di tag: colpisce TUTTI gli elementi di quel tipo */
p {
    line-height: 1.5;
}

/* Selettore di classe: colpisce ogni elemento con class="evidenziato" */
.evidenziato {
    background-color: yellow;
}

/* Selettore di id: colpisce UN SOLO elemento, quello con id="titolo-principale" */
#titolo-principale {
    text-align: center;
}

E nell’HTML:

<h1 id="titolo-principale">Benvenuti</h1>
<p class="evidenziato">Questo paragrafo è evidenziato.</p>
<p>Questo no.</p>

Regola pratica: usa le classi per stili che si ripetono su più elementi, gli id solo per un elemento unico nella pagina (un id, per definizione, non dovrebbe comparire due volte nello stesso documento).

Si possono anche combinare selettori:

/* Solo i <p> con classe "evidenziato" */
p.evidenziato {
    font-weight: bold;
}

/* Il figlio diretto <li> dentro <nav> */
nav > li {
    display: inline;
}

/* Qualunque discendente <a> dentro .card, a qualunque livello */
.card a {
    text-decoration: none;
}

Chi vince quando due regole si contraddicono?

Partiamo da un esempio che introduce il problema delle regole a cascata.

p {
    color: blue;
}

.evidenziato {
    color: red;
}

<p class="evidenziato">Di che colore sarà questo testo?</p>

CSS significa letteralmente “Cascading Style Sheets” (fogli di stile a cascata) e questo perché stabilisce un ordine di applicazione per le regole. Questo genera anche un ordine di priorità, nel senso che le regole applicate dopo vinceranno su quelle applicate prima.

L’ordine di applicazione delle regole è il seguente:

Il CSS esterno (ad esempio, il file stile.css)
Il CSS interno (presente nel tag <style>)
Il CSS inline (l’attributo style="...")

All’interno di ognuno di questi livelli, le regole vengono applicate secondo l’ordine di specificità:

Tag (p)
Classe (.evidenziato), attributo, pseudo-classe
Id (#titolo)

A parità di specificità, vince la regola scritta più in basso nel file. Se due regole hanno lo stesso identico selettore, l’ultima sovrascrive la prima.

Tip

Considerando che ci siamo già detti di NON usare CSS interno o il CSS inline, le uniche regole interessanti per noi sono quelle tag-class-id. Non dovrebbe essere difficilissimo ricordarlo.

Quindi… di che colore è il testo sopra??

Il box model

Ogni elemento HTML, quando viene renderizzato, è un rettangolo composto da quattro strati concentrici:

div {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Dall’interno verso l’esterno:

content — il contenuto vero e proprio (testo, immagine…), largo width
padding — lo spazio interno, tra il contenuto e il bordo
border — il bordo vero e proprio
margin — lo spazio esterno, tra il bordo dell’elemento e ciò che sta intorno

CSS Box Model

Warning

Un dettaglio che confonde spesso: di default, width: 200px si applica solo al content. Se aggiungi padding e border, la larghezza totale dell’elemento cresce oltre i 200px dichiarati.

Per evitare sorprese, è comune impostare globalmente:
* {
    box-sizing: border-box;
}
Con box-sizing: border-box, width include padding e border: l’elemento resta largo esattamente 200px, e il padding “mangia” spazio dal contenuto invece di aggiungersi.

Esercizi

Esercizio w201

Crea un file stile.css che imposti: colore di sfondo della pagina (body) grigio chiaro, tutti i paragrafi con font-size: 16px, e tutti i titoli <h1> centrati.

Esercizio w202

Data questa pagina HTML, scrivi un CSS che coloni di verde SOLO il testo con class="prezzo", lasciando gli altri paragrafi del colore di default:

<p>Descrizione del prodotto.</p>
<p class="prezzo">29,99 €</p>
<p>Spedizione gratuita.</p>

Esercizio w203

Nel seguente CSS, spiega (a parole, in un commento) quale regola vincerà per un elemento <p id="intro" class="testo"> e perché:

p { color: black; }
.testo { color: blue; }
#intro { color: green; }

Esercizio w204

Crea un <div> con width: 150px, padding: 15px, border: 3px solid navy e nessun box-sizing. Calcola (a mano, scrivilo in un commento) quanto è largo in totale l’elemento sulla pagina. Poi aggiungi box-sizing: border-box e ricalcola.

Keyboard shortcuts