InnoMarts logo
InnoMarts
Fast websites
← Back to course

Primi Passi con CSS

Primi Passi con CSS

Benvenuto alla prima lezione CSS.

Nel corso HTML hai imparato a costruire la struttura di una pagina web.

Ora entra CSS.

CSS guarda il tuo HTML semplice e dice:

“Bella struttura. Molto responsabile. Ma perché sei vestito come un modulo dell’ufficio comunale?”

CSS dà stile alla pagina.

Controlla colori, font, spaziatura, layout, bordi, sfondi e molti altri dettagli visivi.

HTML crea il contenuto.

CSS rende il contenuto leggibile, piacevole e meno capace di spaventare i visitatori.

Cosa Imparerai

In questa lezione imparerai:

Cos’è CSS?

CSS significa Cascading Style Sheets.

È un linguaggio usato per dare stile ai documenti HTML.

HTML dice:

<h1>Hello World</h1>

CSS dice:

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

Insieme creano una pagina con struttura e stile.

HTML è lo scheletro.

CSS sono vestiti, taglio di capelli, scarpe e magari occhiali da sole.

Non troppi occhiali da sole.

Stiamo costruendo siti, non iniziando un video musicale drammatico.

Perché Esiste CSS

Immagina di scrivere gli stili direttamente dentro ogni elemento HTML.

Così:

<h1 style="color: blue; font-size: 48px;">Hello World</h1>
<p style="color: gray; font-size: 18px;">This is my paragraph.</p>

Funziona.

Ma diventa disordinato molto velocemente.

Se hai 50 titoli e vuoi cambiare colore, devi modificare 50 punti.

Questo non è sviluppo.

È punizione con tastiera inclusa.

CSS ti permette di scrivere le regole di stile in un solo posto.

Esempio:

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

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

Ora tutti gli elementi h1 e tutti gli elementi p possono seguire le stesse regole.

Pulito.

Organizzato.

Meno caos.

CSS sta già salvando il tuo futuro te dalla sofferenza.

Crea il Tuo Primo Progetto CSS

Crea una cartella per questa lezione:

mkdir css-lesson1
cd css-lesson1
touch index.html
touch style.css

Ora hai due file:

css-lesson1/
  index.html
  style.css

index.html conterrà la struttura della pagina.

style.css conterrà gli stili.

Questa separazione è importante.

HTML fa la struttura.

CSS fa il design.

Come due persone sullo stesso progetto.

Una costruisce il muro.

L’altra dice: “Bel muro. Dipingiamolo.”

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primi Passi con CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>La Mia Prima Pagina CSS</h1>
    <p>CSS rende HTML più bello.</p>
  </header>

  <main>
    <section>
      <h2>Informazioni su Questa Pagina</h2>
      <p>Questa è una pagina semplice creata per praticare CSS di base.</p>
    </section>

    <section>
      <h2>Cosa Sto Imparando</h2>
      <ul>
        <li>Come collegare CSS a HTML</li>
        <li>Come stilizzare i titoli</li>
        <li>Come cambiare colori e spaziatura</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Creata mentre imparo CSS.</p>
  </footer>
</body>
</html>

La riga più importante qui è questa:

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

Questa riga collega il file HTML al file CSS.

Senza questa riga, il file CSS può urlare tutto il giorno.

La pagina HTML non lo ascolterà.

L’Elemento link

L’elemento link va dentro head.

Esempio:

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

Dice al browser:

Carica il file style.css e usalo come foglio di stile per questa pagina.

L’attributo rel indica la relazione.

L’attributo href indica il percorso del file.

Se il file CSS è nella stessa cartella di index.html, questo funziona:

href="style.css"

Se il file CSS è dentro una cartella chiamata css, il percorso sarebbe:

href="css/style.css"

I percorsi contano.

Il browser non è telepatico.

Purtroppo.

Scrivi il Primo CSS

Apri style.css e aggiungi questo:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
}

h1 {
  color: #2563eb;
}

h2 {
  color: #111827;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Salva il file.

Apri index.html nel browser.

La pagina dovrebbe apparire diversa.

Complimenti.

Hai appena stilizzato la tua prima pagina con CSS.

Nessuna cerimonia richiesta.

Ma una piccola celebrazione con caffè è permessa.

Come Funzionano le Regole CSS

Una regola CSS di solito ha tre parti:

selector {
  property: value;
}

Esempio:

h1 {
  color: blue;
}

Qui:

Significa:

Trova ogni elemento h1 e rendi il testo blu.

CSS dà istruzioni al browser.

A volte il browser obbedisce.

A volte hai fatto un errore di battitura.

Di solito è l’errore di battitura.

Sii forte.

Selettori

Un selettore sceglie cosa vuoi stilizzare.

Esempio:

p {
  color: gray;
}

Questo seleziona tutti gli elementi p.

Esempio:

h2 {
  font-size: 32px;
}

Questo seleziona tutti gli elementi h2.

Per ora usiamo selettori semplici basati sugli elementi.

Più avanti impareremo classi, ID, combinazioni e selettori più potenti.

I selettori CSS sono come dire:

“Tu. Sì, tu. Indossa questo stile.”

Molto diretto.

Molto teatrale.

Proprietà e Valori

Una proprietà è ciò che vuoi cambiare.

Un valore è come vuoi cambiarlo.

Esempio:

color: red;

color è la proprietà.

red è il valore.

Altro esempio:

font-size: 24px;

font-size è la proprietà.

24px è il valore.

CSS usa molte proprietà:

Non provare a memorizzare tutto oggi.

È così che i principianti diventano mobili stanchi.

Impara passo dopo passo.

Aggiungi Spaziatura Migliore

Ora miglioriamo la spaziatura della pagina.

Aggiungi questo a style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

header {
  background-color: #111827;
  color: white;
  padding: 40px;
  text-align: center;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

section {
  background-color: white;
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 12px;
}

footer {
  text-align: center;
  padding: 20px;
  color: #666;
}

Ora la pagina dovrebbe sembrare più organizzata.

Non perfetta.

Ma sicuramente meno come HTML fuggito da una cantina.

Cos’è margin?

margin è lo spazio fuori da un elemento.

Esempio:

section {
  margin-bottom: 20px;
}

Questo aggiunge spazio sotto ogni sezione.

Margin è come lo spazio personale.

Gli elementi ne hanno bisogno.

Le persone ne hanno bisogno.

Il tuo layout ne ha sicuramente bisogno.

Cos’è padding?

padding è lo spazio dentro un elemento.

Esempio:

section {
  padding: 24px;
}

Crea spazio tra il bordo della sezione e il contenuto dentro.

Senza padding, il testo si attacca ai bordi.

E sembra scomodo.

Come sedersi troppo vicino a qualcuno su un autobus vuoto.

Cos’è background-color?

background-color cambia lo sfondo di un elemento.

Esempio:

header {
  background-color: #111827;
}

Questo rende l’header scuro.

Puoi usare nomi di colori:

color: blue;

Oppure valori hex:

color: #2563eb;

I valori hex sembrano misteriosi all’inizio.

Come codici segreti.

Ma sono solo codici colore.

Niente magia.

Solo pixel che fingono di essere magia.

Test con Server Locale

Puoi aprire index.html direttamente nel browser.

Ma puoi anche usare Caddy per servire la cartella localmente:

caddy file-server --listen :8080

Poi apri:

http://localhost:8080

È utile quando vuoi che il progetto si comporti più come un vero sito.

Non obbligatorio.

Ma comodo.

E sì, usare un server locale ti fa sembrare leggermente più professionale.

Anche se il tuo CSS sta ancora litigando con un margin.

Errori Comuni

Dimenticare il link CSS

Se CSS non funziona, controlla questa riga:

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

Assicurati che sia dentro head.

Assicurati che il nome del file sia corretto.

style.css non è uguale a styles.css.

I computer sono severi.

Non perdonano drammi ortografici.

Scrivere CSS dentro HTML per errore

CSS appartiene a style.css.

Non dentro il body così:

<body>
  h1 {
    color: blue;
  }
</body>

Non è valido.

HTML lo guarderà e dirà:

“Non so cosa sia, ma sembra sospetto.”

Dimenticare i punti e virgola

Meglio così:

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

Ogni riga di proprietà dovrebbe di solito finire con un punto e virgola.

CSS può a volte sopravvivere senza l’ultimo.

Ma non mettere alla prova la sua pazienza.

Pratica

Crea una tua pagina con:

Poi stilizzala con CSS.

Il tuo CSS dovrebbe cambiare:

Mantieni tutto semplice.

Oggi non devi diventare designer.

Oggi devi far ascoltare HTML a CSS.

Mini Sfida

Modifica la pagina così:

Cambia una cosa alla volta.

Salva.

Aggiorna.

Osserva.

Questo è il ciclo CSS.

Scrivi.

Salva.

Aggiorna.

Confusione.

Correggi.

Vittoria.

Ripeti.

Riassunto

Oggi hai imparato che:

Hai scritto il tuo primo CSS.

È un vero passo avanti.

La pagina forse non è ancora un capolavoro.

Ma non è più HTML nudo sotto la pioggia.

Prossima Lezione

Nella prossima lezione studieremo meglio i selettori e lo styling di base.

I selettori sono il modo in cui dici a CSS esattamente cosa stilizzare.

Molto importante.

Perché CSS senza selettori è solo una persona che urla istruzioni di design nel vuoto.