Guida CSS – Introduzione, primi passi e approfondimenti

Un percorso guidato per capire cos’è il CSS, perché è importante e come iniziare a usarlo in modo corretto.

Cos’è il CSS e a cosa serve
Dal “cos’è” al “come si usa”
Capitolo 1 – Come collegare CSS all’HTML
Capitolo 2 – Selettori CSS e Specificità
Capitolo 3 – Proprietà fondamentali del CSS
Approfondimenti

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Cos’è il CSS e a cosa serve

Il CSS (Cascading Style Sheets, “fogli di stile a cascata”) è il linguaggio che definisce l’aspetto grafico delle pagine web. Se l’HTML si occupa di struttura e contenuto, il CSS controlla presentazione e stile: colori, font, spaziature, layout, transizioni e animazioni.

Migliora la leggibilità: scelte tipografiche e spaziature rendono i contenuti più chiari.
Separa contenuto e stile: codice più ordinato, facile da mantenere.
Riutilizzabile: uno stesso foglio di stile può servire più pagine.
Responsive: design che si adatta a schermi e dispositivi diversi.

Esempio rapido

HTML senza CSS:

<h1>Benvenuto</h1>
<p>Questa è una pagina senza stile.</p>

HTML con un tocco di stile (inline per dimostrazione):

<h1 style="color: blue; text-align: center;">Benvenuto</h1>
<p style="font-size: 18px; color: gray;">Questa è una pagina con stile!</p>

Dal “cos’è” al “come si usa”

Sapere che il CSS “veste” l’HTML è l’inizio. Per usarlo bene bisogna imparare: come collegarlo alle pagine, come selezionare gli elementi giusti e quali proprietà applicare per ottenere il risultato desiderato. Nei prossimi capitoli vedrai i primi passi fondamentali, con esempi e buone pratiche.

Capitolo 1 – Come collegare CSS all’HTML

Esistono tre metodi principali, ognuno con pro e contro. In progetti reali userai quasi sempre il foglio di stile esterno.

1) CSS Inline (nell’attributo `style`)

Scrivi le dichiarazioni direttamente sull’elemento. Utile per test o micro-override, sconsigliato a lungo termine.

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

Pro: rapidissimo, non richiede file esterni.
Contro: difficile da mantenere; specificità altissima; mescola struttura e stile.

2) CSS Interno (blocco `<style>` nel <head>)

Utile per pagine isolate, email HTML o prototipi singola-pagina.

<head>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    p { color: #333; }
  </style>
</head>

3) CSS Esterno (file .css collegato con `<link>`)

È l’approccio consigliato per siti e app: separa nettamente contenuto e stili, abilita cache e riuso.

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

Struttura consigliata dei file

/assets/css/
  base.css       /* reset/normalize, variabili, tipografia di base */
  components.css /* bottoni, card, badge, ecc. */
  layout.css     /* griglie, contenitori, header/footer */
  pages.css      /* eventuali regole specifiche per pagine */

Best practice

Preferisci il CSS esterno per manutenzione e performance (cache del browser).
Evita l’inline salvo casi eccezionali (AB test, email HTML, micro correzioni).
Organizza le regole per responsabilità (base, componenti, layout).
Usa path assoluti o corretti relativi per i file CSS e le risorse (immagini, font).

Capitolo 2 – Selettori CSS e Specificità

I selettori dicono al browser quali elementi vanno stilizzati. Capire la specificità evita conflitti e “bug visivi”. Ricorda: più il selettore è “mirato”, più pesa.

Selettori di base

Per elemento: colpisce tutti i tag dell’elemento.

p { color: blue; }

Per classe: riutilizzabile su più elementi.

.evidenziato { background: yellow; }
<p class="evidenziato">Testo evidenziato</p>

Per ID: deve essere univoco nella pagina.

#titolo { font-size: 24px; }
<h1 id="titolo">Homepage</h1>

Per attributo: filtra in base alla presenza/valore dell’attributo.

input[type="text"] { border: 1px solid #aaa; }

Combinatori e selettori avanzati

/* Discendente (spazio) */
article p { margin-bottom: 1rem; }

/* Figlio diretto (>) */
nav > a { text-decoration: none; }

/* Fratello adiacente (+) */
h2 + p { margin-top: -0.25rem; }

/* Fratelli generici (~) */
.card ~ .card { margin-top: 1rem; }

/* Pseudo-classi e pseudo-elementi */
button:hover { transform: translateY(-1px); }
input:focus { outline: 2px solid #5b9; }
p::first-line { text-transform: uppercase; }

Specificità in breve

La specificità determina quale regola vince quando più regole colpiscono lo stesso elemento. Ordine (dal più forte al più debole - da qui il nome "a cascata"):

Stili inline (es. style="...")
Selettori per ID (es. #header)
Classi / pseudo-classi / attributi (es. .btn, :hover, [type="text"])
Elementi / pseudo-elementi (es. p, ::before)

La regola dichiarata più in basso (a parità di specificità) sovrascrive quella precedente grazie alla “cascata”.

Esempio di conflitto risolto

p { color: black; }              /* specificità bassa */
.highlight p { color: green; }   /* più specifica (classe + elemento) */
#main p { color: purple; }       /* ancora più specifica (ID + elemento) */

Note importanti

!important forza la regola ma va usato raramente: complica il debug.
L’ereditarietà propaga alcune proprietà (es. font-family, color) ai figli.
Preferisci selettori semplici e prevedibili; evita catene lunghissime.

Capitolo 3 – Proprietà fondamentali del CSS

Le proprietà sono le “istruzioni” applicate agli elementi. Qui trovi quelle che userai ogni giorno, con esempi e suggerimenti pratici.

Colore e sfondo

p {
  color: #333;                          /* colore del testo */
  background-color: #f7f7f7;            /* colore di sfondo */
  background-image: url('/img/pattern.png'); /* immagine di sfondo (opzionale) */
  background-repeat: repeat;            /* repeat | no-repeat | repeat-x | repeat-y */
  background-position: center;          /* posizione */
  background-size: cover;               /* cover | contain | auto */
}

Tipografia

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;        /* dimensione base */
  line-height: 1.6;       /* altezza di riga per leggibilità */
  letter-spacing: 0;      /* spaziatura tra lettere (di solito 0) */
}
h1 { font-size: clamp(2rem, 3vw, 3rem); } /* titolo fluido e responsive */
em { font-style: italic; }
strong { font-weight: 700; }

Box model: margin, padding, border

.card {
  box-sizing: border-box;  /* include padding+border nel calcolo della larghezza */
  width: 100%;
  max-width: 640px;
  margin: 1rem auto;       /* spazio esterno */
  padding: 1rem;           /* spazio interno */
  border: 1px solid #ddd;  /* bordo */
  border-radius: 12px;     /* angoli arrotondati */
}

Display e flusso

.badge { display: inline-block; padding: .25rem .5rem; }
.block { display: block; }
.inline { display: inline; }
.hidden { display: none; }

Dimensioni e unità utili

.container {
  width: min(90vw, 1200px); /* limite massimo e adattamento a viewport */
  min-height: 50vh;         /* 50% dell’altezza viewport */
}
:root {
  --sp: 1rem;               /* variabile di spazio base */
}
.section { padding: calc(var(--sp) * 2); }

Stati interattivi e transizioni

.btn {
  background: #0a66c2;
  color: white;
  padding: .75rem 1rem;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.btn:active { transform: translateY(0); }

Accessibilità visiva

Assicurati di avere contrasto sufficiente tra testo e sfondo (WCAG AA).
Non affidarti solo al colore per comunicare stati (usa anche icone/testo).
Mantieni :focus visibile per gli elementi interattivi.

:focus-visible { 
  outline: 3px solid #5ab; 
  outline-offset: 2px; 
}

Errori comuni da evitare

Dimenticare box-sizing: border-box; e sballare i calcoli dei layout.
Usare !important come scorciatoia: crea debito tecnico.
Selettori troppo specifici o nidificati: rendono difficile l’override.
Unità errate (px ovunque): valuta rem, em, vw, vh per il responsive.

Approfondimenti

Vuoi andare oltre le basi? Ecco una raccolta di articoli tematici per esplorare concetti avanzati del CSS e migliorare il tuo design frontend.

Responsive Design – Tecniche pratiche per adattare i siti a desktop, tablet e smartphone.
Viewport – Cos’è, come funziona e perché è fondamentale per il responsive design.
Media Query – Adattare layout, font e immagini a diverse larghezze di schermo.
Tecniche per centrare un div – Argomento sempre di moda 😀.
Box-shadow e Drop-shadow – Ombre per box e immagini, con esempi di effetti moderni e realistici.
Variabili CSS – Come creare e riutilizzare variabili (--variabile) per un codice più pulito e modulare.
Proprietà custom CSS – Come creare proprieta CSS personalizzate.
Unità di misura – Differenza tra px, em, rem, vh, vw e unità relative moderne.
I pixel in CSS andrebbero evitati – Tranquillo.. ti spiego perchè.
Funzione attr() – Come leggere valori dagli attributi HTML direttamente nel CSS.
Direttiva @view-transition – Creare transizioni fluide tra pagine e stati con il nuovo standard CSS.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog