SILICIO E NUVOLE: Corso di CSS & Web Design: 1

venerdì 14 febbraio 2025

Corso di CSS & Web Design: 1 – Introduzione a CSS

1 – Introduzione a CSS

1. Cos’è il CSS e come si collega all’HTML

CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione di una pagina web. Grazie al CSS possiamo separare contenuto (HTML) e stile (CSS), rendendo il codice più leggibile e modulare.

Funzioni principali del CSS

Definire colori, font, dimensioni, margini, padding e layout.
Gestire il posizionamento degli elementi sulla pagina.
Creare effetti visivi e interattivi (hover, animazioni, transizioni).

Collegamento tra CSS e HTML

Il CSS può essere applicato in tre modi:

Inline CSS – direttamente nell’elemento HTML:

<p style="color: blue; font-size: 16px;">Testo blu</p>

Pro: semplice e veloce.
Contro: difficile da mantenere su siti complessi.

Internal CSS – all’interno della pagina HTML, nel tag <style>:

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Testo verde</p>
</body>

Buono per pagine singole o esperimenti.

External CSS – file separato .css collegato tramite <link>:

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

/* stile.css */
p {
  color: red;
  font-size: 20px;
}

Pro: stile centralizzato per più pagine.
Consigliato in produzione.

2. Sintassi di base: selettori, proprietà, valori

Il CSS ha una sintassi molto semplice:

\text{Selettore} \{ \text{proprietà}: \text{valore}; \}

Componenti principali

Selettore – indica l’elemento HTML da stilizzare:
- Elemento: p { } → tutti i paragrafi.
- Classe: .classe { } → tutti gli elementi con class="classe".
- ID: #id { } → elemento con id="id".
- Universale: * { } → tutti gli elementi.
Proprietà – ciò che vogliamo modificare:
- color → colore del testo
- background-color → colore di sfondo
- font-size → dimensione del testo
- margin → margini esterni
- padding → spaziatura interna
Valore – specifica della proprietà:
- Colori: red, #ff0000, rgb(255,0,0)
- Dimensioni: 16px, 1.2em, 100%
- Allineamento: center, left, right

Esempio di blocco CSS

h1 {
  color: darkblue;
  font-size: 32px;
  text-align: center;
}

3. Esempi pratici di selettori

Selettore di elemento

p {
  color: green;
  font-family: Arial, sans-serif;
}

Selettore di classe

.highlight {
  background-color: yellow;
  font-weight: bold;
}

HTML:

<p class="highlight">Questo testo è evidenziato</p>

Selettore ID

#titolo-principale {
  font-size: 40px;
  color: darkred;
}

HTML:

<h1 id="titolo-principale">Benvenuti!</h1>

4. Esercizio svolto: applicare i primi stili a una pagina

Obiettivo

Creare una pagina HTML semplice con paragrafi e un titolo, applicando colori, font e allineamento.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Prima pagina CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <h1 id="titolo-principale">Benvenuti nella mia pagina!</h1>
  <p class="intro">Questo è il primo paragrafo con stile CSS.</p>
  <p class="intro">E questo è il secondo paragrafo, colorato e centrato.</p>
</body>
</html>

CSS (stile.css)

/* Stile per il titolo */
#titolo-principale {
  color: darkblue;
  text-align: center;
  font-family: 'Verdana', sans-serif;
}

/* Stile per i paragrafi introduttivi */
.intro {
  color: darkgreen;
  font-size: 18px;
  text-align: center;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

Risultato

Titolo centrato e blu.
Paragrafi centrati, verdi su sfondo grigio chiaro con padding.
Stile applicato tramite CSS esterno.

5. Suggerimenti pratici

Usare external CSS per progetti più grandi.
Dare nomi chiari a classi e ID (.menu, #footer).
Ricordare la cascata: se un elemento ha più regole, prevale quella più specifica.

SILICIO E NUVOLE