Introduzione

Prerequisiti: conoscere i tag, gli attributi e la struttura di base di un documento HTML.

CSS significa Cascading Style Sheets, cioè fogli di stile a cascata. È il linguaggio che utilizziamo per definire la presentazione di una pagina web: colori, caratteri, sfondi, spaziature e disposizione degli elementi.

HTML descrive la struttura e il significato dei contenuti: un titolo, un paragrafo, una lista. CSS permette di personalizzare il loro aspetto.

Partiamo da un documento HTML senza stili aggiunti

Il documento contiene un titolo e un paragrafo. Nella colonna di sinistra trovi il codice; nella colonna di destra il risultato nel browser.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina</title>
</head>
<body>
    <h1>Benvenuti nella mia pagina</h1>
    <p>Sto imparando HTML e CSS.</p>
</body>
</html>

Il titolo appare già più grande e in grassetto rispetto al paragrafo. Questo accade perché il browser applica i propri stili predefiniti. Nel documento non abbiamo ancora scritto alcuna regola CSS.

Una regola CSS si scrive secondo questo schema:

selettore {
    proprietà1: valore;
    proprietà2: valore;
    /* altre dichiarazioni */
}

Le parole nello schema sono segnaposto: nelle regole reali utilizziamo selettori, proprietà e valori validi.

• Il selettore individua gli elementi HTML ai quali applicare lo stile.
• Le parentesi graffe { } racchiudono le dichiarazioni.
• La proprietà indica la caratteristica da modificare.
• Il valore indica l'impostazione da assegnare.
• I due punti separano la proprietà dal valore.
• Il punto e virgola separa le dichiarazioni. È buona abitudine inserirlo anche dopo l'ultima.

Un esempio

h1 {
    color: blue;
    font-size: 32px;
}

p {
    color: green;
}

La prima regola modifica i titoli principali:

• h1 è il selettore.
• color: blue; rende il testo blu.
• font-size: 32px; imposta il carattere a 32 pixel.

La seconda regola seleziona i paragrafi con p e rende il loro testo verde.

Possiamo inserire il CSS in tre modi:

1. In linea: nell'attributo style di un elemento HTML.
2. Interno o in pagina: nel tag <style> all'interno della <head>.
3. Esterno: in un file CSS collegato al documento HTML.

Riprendiamo la pagina iniziale. Con ciascun metodo rendiamo il titolo blu e il paragrafo verde. In questi esempi modifichiamo soltanto il colore.

3.1 Stile in linea

Lo stile in linea si scrive direttamente nel tag dell'elemento, usando l'attributo style.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina</title>
</head>
<body>
    <h1 style="color: blue;">Benvenuti nella mia pagina</h1>
    <p style="color: green;">Sto imparando HTML e CSS.</p>
</body>
</html>

Il titolo contiene style="color: blue;"; il paragrafo contiene style="color: green;".

Nell'attributo style non si scrivono il selettore e le parentesi graffe, perché l'elemento da modificare è già quello che contiene l'attributo.

Per assegnare più proprietà allo stesso elemento si separano le dichiarazioni con il punto e virgola:

<h1 style="color: blue; font-size: 32px;">Benvenuti nella mia pagina</h1>

Questo metodo permette di intervenire su un singolo elemento. Per applicare lo stesso stile ad altri elementi, occorre ripetere le dichiarazioni nei loro attributi.

3.2 Stile interno o in pagina

Con lo stile interno raccogliamo le regole in un tag <style>, inserito nella <head>.

Ripartiamo dal documento iniziale senza attributi style. Scriviamo due regole: una per il titolo e una per il paragrafo.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina</title>

    <style>
        h1 {
            color: blue;
        }

        p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Benvenuti nella mia pagina</h1>
    <p>Sto imparando HTML e CSS.</p>
</body>
</html>

Il risultato è uguale a quello dello stile in linea. Questa volta, però, usiamo regole complete: selettore, parentesi graffe e dichiarazioni.

La regola h1 si applica a tutti i titoli <h1> presenti nella pagina. La regola p si applica a tutti i paragrafi. Se aggiungiamo un altro paragrafo, anche il suo testo sarà verde.

Le regole sono raccolte in un solo punto, ma appartengono al documento HTML che le contiene.

3.3 Stile esterno

Con lo stile esterno spostiamo le regole in un file separato, chiamato in questo esempio stile.css.

Il documento HTML collega il foglio di stile tramite il tag <link> nella <head>.

Salviamo i due file nella stessa cartella:

mia-pagina/
    index.html
    stile.css

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina</title>
    <link rel="stylesheet" href="stile.css">
</head>
<body>
    <h1>Benvenuti nella mia pagina</h1>
    <p>Sto imparando HTML e CSS.</p>
</body>
</html>

h1 {
    color: blue;
}

p {
    color: green;
}

Esaminiamo il collegamento:

<link rel="stylesheet" href="stile.css">

• rel="stylesheet" indica che stiamo collegando un foglio di stile.
• href="stile.css" indica il percorso del file CSS. In questo esempio il file è nella stessa cartella di index.html.

Lo stesso foglio di stile può essere collegato da più pagine HTML. Modificando una regola nel file CSS, aggiorniamo la presentazione degli elementi interessati in tutte le pagine che lo utilizzano.

Nei tre esempi abbiamo ottenuto lo stesso risultato: titolo blu e paragrafo verde. Cambia il punto in cui scriviamo le dichiarazioni CSS.

Prova a rispondere, poi apri ogni domanda per leggere la risposta.