Corso di CSS / Che cos’è il CSS e in cosa si distingue dall’HTML?

CSS (Cascading Style Sheets) controlla l'aspetto e il layout di un documento HTML, inclusi colori, font, spaziatura e posizionamento degli elementi. HTML descrive il contenuto e la sua struttura; CSS determina come quella struttura viene presentata.

Come HTML e CSS dividono le responsabilità

Immagina di creare una pagina informativa su un giardino. Il fatto che “Small Garden” (piccolo giardino) sia il titolo più importante della pagina è rappresentato da h1 in HTML. Il CSS determina se il titolo viene visualizzato in verde e quale sia la dimensione del carattere. Solo perché il colore è verde non significa che un normale paragrafo abbia il significato di un titolo.

JavaScript è un linguaggio di programmazione che aggiunge comportamento alle pagine web. Anche il CSS può cambiare la forma o mostrare animazioni quando il mouse passa sopra, quindi cambiare lo schermo non significa necessariamente che sia stato usato JavaScript. Qui ci concentriamo prima sulla separazione dei contenuti e dell'aspetto.

Perché una pagina ha stili prima che tu scriva CSS

I browser hanno stili predefiniti. Questo è il motivo per cui i titoli appaiono grandi, c'è spazio tra i paragrafi e i link appaiono sottolineati senza dover scrivere CSS direttamente. I font e i margini predefiniti possono variare a seconda del browser e delle impostazioni dell'utente. Aggiungendo CSS, puoi personalizzare l'aspetto di cui hai bisogno.

Incolla il seguente HTML in un editor di testo, salvalo come index.html in formato UTF-8 e aprilo nel browser. Assicurati che il nome del file non sia index.html.txt. Se l'estensione del file è nascosta, controlla l'estensione nel formato di salvataggio dell'editor e nelle proprietà del file.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

Questo frammento è un esempio della struttura del testo. Se vuoi iniziare subito, usa l'esempio completo qui sotto. Se leggi prima il titolo e il testo guida, è facile distinguere se il contenuto effettivo o solo l'aspetto è cambiato quando si modifica il CSS.

Leggi selettori, proprietà e valori

h1 {
  color: #087f5b;
}

h1 è il selettore, color è la proprietà e #087f5b è il suo valore. Una proprietà e un valore uniti da due punti formano una dichiarazione, come color: #087f5b;. Il colore esadecimale a sei cifre rappresenta i componenti rosso, verde e blu. Per ulteriori dettagli, vedi Sintassi CSS: selettori, dichiarazioni, commenti ed errori.

Questa regola cambia il colore del testo dell'elemento h1 in HTML in verde. Non traduce frasi né aggiunge paragrafi. Per distinguere e decorare solo il testo guida, aggiungi class="notice" a HTML e seleziona .notice da CSS. Il punto è una notazione del selettore di classe in CSS e non è incluso nel nome della classe in HTML.

Una spiegazione che il CSS è responsabile della presentazione dei documenti web può anche essere trovata in introduzione al CSS di MDN.

Esegui l'esempio completo Small Garden

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

Quando apri il file salvato, vedrai un titolo verde su uno sfondo chiaro, e le informazioni sugli orari di apertura avranno un bordo e uno spazio. Il contenuto all'interno dell'elemento style è CSS. La tabella seguente fornisce una descrizione minima per leggere le proprietà utilizzate negli esempi.

Non è necessario memorizzare ogni proprietà in questa fase. Prima identifica quale elemento corrisponde al selettore e quale aspetto di quell'elemento viene modificato da ciascuna dichiarazione. Un foglio di stile esterno ti permette di riutilizzare lo stesso design su più pagine. Per ulteriori dettagli, vedi Applica CSS con stili Inline, Interni ed Esterni.

Cambia tre valori e confronta i risultati

1. Sostituisci color in h1 con #1d4ed8. Se salvi e ricarichi, solo il titolo grande sarà blu. I colori degli h2 e dei paragrafi generali della guida per i visitatori non sono soggetti a questa regola.
2. Modifica line-height di body da 1.7 a 2. L'altezza della linea del corpo sarà maggiore. Puoi vedere più facilmente le differenze inserendo un paragrafo con più di due righe o restringendo la finestra.
3. Sostituisci background-color in .notice con #fff4cc. Solo lo sfondo delle informazioni sugli orari di apertura diventa giallo. L'intero sfondo della pagina è specificato separatamente nel corpo, quindi rimane lo stesso.

Invece di cambiare tutti e tre i valori contemporaneamente, salva e controlla ogni volta che modifichi un elemento. Se i risultati sono diversi, verifica se il file modificato e il file aperto nel browser sono gli stessi e se le parentesi graffe e i due punti sono presenti. Quando hai finito l'esercizio, ripristina i tre valori al loro stato originale, aggiorna e confronta con lo schermo originale. Durante questo processo, la chiave è mantenere la struttura del titolo HTML, del paragrafo e del link.