CSS: trasforma la struttura HTML in un’interfaccia responsive

CSS è il linguaggio utilizzato per definire la presentazione dei contenuti di una pagina Web, controllando colori, tipografia, dimensioni, spaziature, layout e adattamento ai diversi schermi. In questa dispensa analizzeremo i selettori CSS, il box model, il funzionamento della cascata CSS e i criteri con cui il browser stabilisce quali regole applicare. Approfondiremo inoltre il responsive design, mostrando come layout fluidi, Grid, Flexbox e media query permettano di adattare l’interfaccia a viewport e dispositivi differenti.

CSS

CSS Download

Elementi chiave

CSS = Cascading Style Sheets, linguaggio utilizzato per descrivere la presentazione di documenti strutturati come le pagine HTML.

HTML → struttura e significato; CSS → presentazione, permettendo di modificare l’aspetto senza riscrivere la struttura del documento.

Foglio di stile = insieme di regole CSS, riutilizzabile su più pagine per mantenere e modificare centralmente un sistema visivo.

Regola CSS = selettore + blocco di dichiarazioni; dichiarazione = proprietà + valore.

Box model = contenuto + padding + bordo + margine, cioè le quattro aree fondamentali attraverso cui CSS rappresenta gli elementi.

content-box ≠ border-box: nel primo width misura il contenuto; nel secondo comprende contenuto, padding e bordo.

Selettori → individuano gli elementi da stilizzare, attraverso elementi, classi, ID, attributi, relazioni, pseudo-classi e pseudo-elementi.

Classe ≠ ID: una classe è riutilizzabile su più elementi, mentre un ID identifica un elemento univoco nel documento.

Pseudo-classe ≠ pseudo-elemento: la prima seleziona uno stato o condizione; il secondo rappresenta una parte o contenuto associato all’elemento.

Cascata = procedimento che risolve dichiarazioni CSS in conflitto stabilendo quale valore applicare a una proprietà.

Priorità della cascata → origine e importanza → livello → specificità → ordine di apparizione, in una rappresentazione semplificata.

Specificità: ID > classi, attributi e pseudo-classi > elementi e pseudo-elementi, quando i criteri precedenti della cascata sono equivalenti.

Layout fluido = dimensioni e disposizione che si adattano gradualmente allo spazio disponibile, anche mediante percentuali, fr, Flexbox e Grid.

Media query = applicazione condizionale di regole CSS, utilizzata per modificare la presentazione quando cambiano caratteristiche come la larghezza della viewport.

Mobile first → regole di base per viewport strette + adattamenti progressivi tramite min-width, combinando layout fluidi e breakpoint.

febogamedev | Ottobre 2, 2026 | 11:43 pm

LEZIONE PRECEDENTE

LEZIONE SUCCESSIVA

Vuoi aiutarmi a scrivere articoli come questo?

Contattami!

Lascia un commento Annulla risposta

No responses yet

Sostieni il progetto

Tutti i materiali che condivido nascono da una convinzione molto semplice: una buona formazione non dovrebbe limitarsi a insegnare quali pulsanti premere, ma aiutare a comprendere le idee, i principi e i processi che stanno dietro agli strumenti.

Per questo dedico una parte significativa del mio tempo a studiare, organizzare e produrre contenuti gratuiti dedicati al multimedia, al design e alla comunicazione visiva. Articoli, lezioni, approfondimenti e risorse che hanno l’obiettivo di rendere accessibili argomenti spesso affrontati in modo frammentario o superficiale.

Questo lavoro richiede però tempo, ricerca e cura. Ogni guida, ogni video, ogni materiale pubblicato gratuitamente è il risultato di molte ore di studio, scrittura e revisione.
Sostenere il progetto attraverso Patreon significa permettermi di continuare a produrre contenuti educativi di qualità, mantenerli accessibili al maggior numero possibile di persone e dedicare più energie alla costruzione di una risorsa che possa essere utile a studenti, professionisti e appassionati.

Se credi che una conoscenza più profonda, rigorosa e consapevole del multimedia abbia valore, il tuo contributo non sostiene soltanto il mio lavoro: aiuta a rendere queste risorse disponibili per tutta la comunità.
Grazie per il supporto e per la fiducia.

PARTECIPA AL PATREON

Patreon è troppo impegnativo?

Puoi sostenermi anche con una donazione libera, senza abbonamento e senza impegno.
Anche un piccolo contributo mi aiuta a continuare a creare giochi, contenuti didattici e materiali gratuiti con più libertà.

Donazione libera

Regala uno strumento utile

Support the project

All the materials I share stem from a very simple conviction: good training should not be limited to teaching which buttons to press, but should help people understand the ideas, principles, and processes behind the tools.

That is why I dedicate a significant portion of my time to researching, organizing, and producing free content focused on multimedia, design, and visual communication—articles, lessons, in-depth analyses, and resources aimed at making accessible topics that are often addressed in a fragmented or superficial way.

However, this work requires time, research, and care. Every guide, video, and piece of material published for free is the result of many hours of study, writing, and revision.
Supporting the project via Patreon enables me to continue producing high-quality educational content, keep it accessible to as many people as possible, and devote more energy to building a resource that benefits students, professionals, and enthusiasts alike.

If you believe that a deeper, more rigorous, and informed understanding of multimedia is valuable, your contribution does more than just support my work: it helps make these resources available to the entire community.
Thank you for your support and trust.

JOIN THE PATREON

Is Patreon too demanding?

You can also support me with a voluntary donation—no subscription or commitment required.

Even a small contribution helps me continue creating games, educational content, and free materials with greater freedom.

voluntary donation

Give a useful tool as a gift

FEBO

Privacy policyCookie policy