CSS: Unlock Powerful and Responsive Web Design

CSS is the language used to control the visual presentation of structured documents such as HTML pages. In this handout, we will explore CSS selectors and declarations, learning how rules target elements and assign properties and values. We will also examine the CSS box model, which defines content, padding, border and margin, and the CSS cascade, which determines which declaration takes precedence when several rules compete. Finally, we will study responsive web design, using fluid layouts, flexible units, Grid, Flexbox and media queries to adapt interfaces to different screen sizes.

CSS

Fullscreen Download

Key points

CSS (Cascading Style Sheets) = language used to control the visual presentation of structured documents; HTML → content structure and meaning, CSS → presentation.

Stylesheet = collection of CSS rules; external stylesheets allow multiple HTML pages to share a consistent visual system and simplify maintenance.

CSS rule = selector + declaration block; each declaration consists of a property and a value specifying how an element should be presented.

Box model = rectangular representation of an element consisting of four areas → content, padding, border, and margin.

Padding ≠ margin: padding creates internal space between content and border, while margin creates external space separating neighboring boxes.

box-sizing: content-box ≠ border-box: the former measures content only; the latter includes padding and border within the specified dimensions.

Element dimensions → depend on content, CSS properties, containing blocks, layout systems, and minimum or maximum size constraints.

CSS selectors → identify elements by tag name, class, ID, attributes, structural relationships, or interface states.

Attribute selectors → select elements according to attribute presence or values; combinators → establish relationships between elements in the document hierarchy.

Class ≠ ID: classes can be shared by multiple elements to create reusable styles, while IDs must uniquely identify elements within a document.

Pseudo-class ≠ pseudo-element: pseudo-classes select elements based on conditions or states; pseudo-elements target specific parts or generated content.

CSS cascade = mechanism that resolves conflicting declarations according to origin, importance, cascade layers, selector specificity, and source order.

Selector specificity → ID selectors generally outrank classes, attributes, and pseudo-classes, which outrank element selectors and pseudo-elements when earlier cascade criteria are equal.

!important → changes declaration priority and can override more specific normal rules; source order determines precedence only when higher-priority criteria are equal.

Fluid layout → continuously adapts element dimensions and distribution to available space using flexible units, percentages, Flexbox, or Grid.

Media queries → conditionally apply CSS rules according to characteristics such as viewport width; breakpoints identify thresholds where layout configurations change.

Responsive design → combines fluid layouts and media queries to adapt interfaces to different screen sizes; mobile-first design progressively enhances layouts for wider viewports.

febogamedev | October 13, 2026 | 4:16 pm

PREVIOUS LESSON

NEXT lessons

Do you want to help me write articles like this one?

Contact me!

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