martedì 4 febbraio 2025

Corso di HTML: 4 Introduzione al CSS

4 – Introduzione al CSS

In questo modulo ci concentreremo sullo styling delle pagine web utilizzando i CSS (Cascading Style Sheets). Il CSS permette di separare il contenuto dalla presentazione, rendendo i siti più ordinati e facili da aggiornare. Mentre HTML definisce cosa viene mostrato, CSS definisce come viene mostrato.

Durante la lezione, gli studenti impareranno a gestire colori, font, dimensioni, spaziature, allineamenti e layout base. Verranno inoltre esplorati i tre metodi principali di applicazione del CSS: inline, internal ed external, con esempi pratici per comprendere vantaggi e limiti di ciascun approccio.

📌 Concetti Base: Selettori, Proprietà e Valori

Il CSS si basa su tre elementi fondamentali:

Selettori – identificano quali elementi HTML devono essere stilizzati.
Proprietà – definiscono l’aspetto da modificare (colore, font, margini, ecc.).
Valori – specificano il comportamento della proprietà scelta.

La sintassi di base del CSS è:

selettore {
  proprietà: valore;
}

Esempio pratico: vogliamo modificare i paragrafi (<p>) della pagina, impostando il colore del testo su blu e un font specifico:

p {
  color: blue;
  font-family: "Times New Roman", serif;
}

Spiegazione dettagliata:

p è il selettore che prende tutti i paragrafi della pagina.
color: blue; definisce il colore del testo.
font-family: "Times New Roman", serif; imposta il tipo di carattere, con fallback serif nel caso in cui il font principale non sia disponibile.

Questo esempio mostra come CSS renda uniforme e coerente l’aspetto di più elementi senza dover ripetere codice HTML inline.

📌 Colori, Font, Dimensioni e Spaziature

Il CSS permette di gestire molti aspetti visivi:

Colori

I colori possono essere definiti in diversi modi:

Nome colore: red, blue, green.
Esadecimale: #FF0000 per il rosso.
RGB: rgb(255,0,0).

Esempio:

h1 {
  color: #1E90FF;
}

Font

Possiamo definire il tipo, la dimensione e lo stile del carattere:

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
}

Spiegazione:

font-family sceglie il tipo di carattere principale e i fallback.
font-size imposta la dimensione del testo in pixel o altre unità (em, rem).
font-style può essere normale, italic o oblique.

Dimensioni e Spaziature

Margini (margin): spazio esterno all’elemento.
Padding (padding): spazio interno all’elemento.
Larghezza e altezza (width, height): dimensioni dei blocchi o immagini.

Esempio pratico:

div.card {
  width: 300px;
  height: 200px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

Spiegazione:

La classe .card definisce un blocco di contenuto con dimensioni e spaziature controllate.
border aggiunge un bordo visibile.

Allineamenti

text-align gestisce l’allineamento orizzontale del testo (left, center, right).
vertical-align regola la posizione verticale di elementi inline.
La proprietà display permette di trasformare elementi inline in blocchi o viceversa.

Esempio:

h2 {
  text-align: center;
}

📌 Differenza tra Inline, Internal ed External CSS

1. Inline CSS

Lo stile viene applicato direttamente a un singolo elemento HTML tramite l’attributo style:

<p style="color:red; font-weight:bold;">Testo rosso e in grassetto</p>

Vantaggi: veloce per modifiche puntuali.

Svantaggi: difficile da mantenere su siti complessi, poco riutilizzabile.

2. Internal CSS

Gli stili sono inseriti in un blocco <style> all’interno dell’<head> della pagina:

<head>
  <style>
    p { color: green; font-size: 16px; }
    h1 { text-align: center; }
  </style>
</head>

Vantaggi: utile per stilizzare una singola pagina senza file esterni.

Svantaggi: non riutilizzabile su altre pagine.

3. External CSS

Il CSS è contenuto in un file separato (ad esempio stile.css) e collegato tramite <link>:

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

Vantaggi: separazione completa tra struttura e stile, facilità di manutenzione e riutilizzo su più pagine.

Consiglio: è il metodo consigliato per progetti complessi o siti multipagina.

📝 Esercizi Operativi

Per consolidare le conoscenze:

Colori e Font
Modifica tutti i paragrafi del tuo sito aggiungendo colore, font e dimensione.
```
p {
  color: #333333;
  font-family: Verdana, sans-serif;
  font-size: 14px;
}
```

Box Model e Spaziature

Crea un <div> con margini e padding visibili.

<div class="card">Contenuto del box</div>

.card {
  width: 250px;
  height: 150px;
  margin: 20px;
  padding: 15px;
  border: 1px solid black;
}

Allineamenti
Centra il testo del titolo principale e i bottoni della pagina:
```
h1, button {
  text-align: center;
}
```
Applicazione di Stile Inline e Internal
Prova ad aggiungere uno stile inline a un singolo paragrafo e confrontalo con quello definito internamente nel <style>.
Creazione di un File External CSS
Salva un file stile.css con tutte le regole viste e collegalo alla tua pagina HTML. Modifica le proprietà e osserva l’impatto su tutta la pagina.

⚡ Esempio: Pagina Colorata con CSS Esterno

In questo esercizio mettiamo in pratica quanto appreso sui CSS. Creeremo una semplice pagina HTML e un file CSS esterno che definirà colori, font, spaziature e layout di base. L’obiettivo è comprendere come separare contenuto e presentazione e come applicare uno stile coerente su tutta la pagina.

1. Struttura della Pagina HTML

Iniziamo con la pagina HTML principale:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Pagina Colorata</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <header>
    <h1>Benvenuto nella mia Pagina</h1>
  </header>
  <section>
    <p>Questo è un paragrafo stilizzato con CSS esterno.</p>
    <p>Possiamo usare colori, font personalizzati e margini.</p>
  </section>
  <footer>
    <p>© 2025 Mario Rossi</p>
  </footer>
</body>
</html>

Spiegazione delle scelte

Dichiarazione <!DOCTYPE html>: indica al browser che si tratta di HTML5, garantendo compatibilità con tutti i browser moderni.
<html lang="it">: specifica la lingua della pagina, utile per accessibilità e SEO.
<head>: contiene informazioni sulla pagina, inclusa la codifica dei caratteri (UTF-8) e il collegamento al file CSS esterno con <link rel="stylesheet" href="stile.css">.
<body>: racchiude i contenuti visibili, suddivisi in header, section e footer.
Header e Footer: separano visivamente e semanticamente le informazioni principali e di chiusura.
Section con paragrafi: permette di organizzare il contenuto in blocchi tematici chiari e leggibili.

2. Il File CSS Esterno

Creiamo un file separato chiamato stile.css con le seguenti regole:

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 20px;
}
header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}
footer {
  background-color: #ddd;
  color: #333;
  padding: 10px;
  text-align: center;
}

Spiegazione delle scelte CSS

body: impostiamo uno sfondo chiaro, un font leggibile e un margine globale per separare il contenuto dai bordi del browser.
header: colore di sfondo verde (#4CAF50) per evidenziare il titolo della pagina, testo bianco per contrasto e padding per creare spazio interno.
p: dimensione del font adeguata (16px) e line-height per migliorare la leggibilità, margine inferiore per separare i paragrafi.
footer: colore grigio chiaro, padding e centratura del testo, per distinguere chiaramente la chiusura della pagina.

Motivazione: separare gli stili in un file esterno consente di modificare rapidamente l’aspetto dell’intero sito senza intervenire su ogni pagina HTML. Inoltre, migliora la manutenzione e la leggibilità del codice.

3. Esercizi Operativi

Questi esercizi permettono di sperimentare direttamente il CSS:

Tema personale: modifica i colori di sfondo (background-color) e dei testi (color) per creare un tema grafico coerente con il tuo progetto personale.
```
body {
  background-color: #e0f7fa;
  color: #1a237e;
}
```
Font multipli: cambia il font dei titoli (h1) e dei paragrafi (p) usando almeno due font diversi per distinguere gerarchicamente il contenuto.
```
h1 {
  font-family: "Georgia", serif;
}
p {
  font-family: "Verdana", sans-serif;
}
```
Margini e Padding: modifica gli spazi tra sezioni e paragrafi per creare un layout più arioso e leggibile.
```
section {
  margin: 30px 0;
  padding: 15px;
}
```

Nuova Section: aggiungi un nuovo blocco di contenuto e stilizzalo con classi personalizzate.

<section class="news">
  <h2>Novità</h2>
  <p>Benvenuto nella sezione Novità, dove condivido aggiornamenti e contenuti interessanti.</p>
</section>

.news {
  background-color: #fff3e0;
  padding: 20px;
  border: 1px solid #ffb74d;
}

Esperimento con CSS Inline e Internal: prova a stilizzare un singolo paragrafo inline e confrontalo con il CSS interno in <style> e quello esterno, osservando come cambia la manutenzione e la consistenza dello stile.

4. Consigli per la pratica

Salva sempre i file CSS nello stesso percorso del file HTML o usa un percorso relativo corretto.
Usa nomi di classi descrittivi (.news, .card) per facilitare la lettura e la gestione degli stili.
Testa le modifiche in diversi browser per assicurarti della compatibilità.
Ricorda che il CSS è cumulativo e gerarchico: le regole più specifiche o più vicine all’elemento prevalgono su quelle generali.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di applicare stili CSS ai tuoi contenuti HTML, gestire colori, font, dimensioni e spaziature, e utilizzare i tre metodi principali di integrazione del CSS. Sarai pronto per creare pagine web esteticamente curate, coerenti e facilmente manutenibili.

SILICIO E NUVOLE