Cosa Si Può Fare con CSS? Guida Pratica

I Fogli di Stile a Cascata (CSS) sono il linguaggio che trasforma HTML grezzo in pagine web visivamente progettate. Controlla layout, tipografia, colore, movimento e comportamento responsive: tutto ciò che l’utente vede.

Capacità Principali

• Tipografia: famiglie di font, dimensioni, pesi, interlinea, spaziatura lettere, font variabili, @font-face per font web personalizzati.
• Colore e Sfondo: esadecimali, RGB, HSL, colori nominati, gradienti (lineari, radiali, conici), immagini di sfondo, blend modes, opacità.
• Layout: Flexbox, CSS Grid, multi‑colonna, float (legacy), posizionamento (relativo, assoluto, fisso, sticky).
• Spaziatura e Dimensioni: margine, padding, gap, larghezza/altezza, min/max, aspect‑ratio, box‑sizing.
• Bordi ed Effetti: raggio, ombre (box‑shadow, text‑shadow), contorni, ritaglio, maschere, filtri (sfocatura, scala di grigi).
• Animazione e Transizione: @keyframes, transition, transform (traslazione, scalamento, rotazione, inclinazione), prefers‑reduced‑motion.
• Design Responsive: media query, container query, unità viewport, tipografia fluida (clamp).
• Pseudo-classi ed elementi: :hover, :focus, :nth‑child, ::before, ::after, ::selection.
• Proprietà Personalizzate (Variabili CSS): valori riutilizzabili, theming, aggiornamenti in runtime tramite JavaScript.
• Accessibilità: stili di focus, modalità alto contrasto, movimento ridotto, proprietà logiche (margin‑inline‑start).

Cosa CSS Non Può Fare

• Eseguire logica o cicli (usa JavaScript).
• Recuperare dati da API.
• Modificare la struttura HTML (solo stilizzarla).
• Persistere lo stato tra le sessioni (usa localStorage/cookie tramite JavaScript).

Best Practice Moderne

• Media query mobile‑first.
• Proprietà logiche per il supporto RTL.
• Variabili CSS per i token di design.
• Architettura a strati: reset → base → componenti → utility.
• Usa @supports per il progressive enhancement.

CSS è oggi un potente sistema di stilizzazione programmabile, ben oltre il semplice strumento “font e colore” dei primi anni 2000.