Manuale completo di CSS

h1 {
  color: #142850;   /* dichiarazione */
  font-size: 2rem;
}

<p style="color: red; font-size: 20px;">Ciao</p>

<head>
  <style>
    h1 { color: #2E6FF2; }
  </style>
</head>

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p { color: gray; }
h1, h2, h3 { font-family: 'Sora', sans-serif; }

<p class="intro">Benvenuto</p>
<p class="intro evidenziato">Importante</p>
<p>Testo normale</p>

.intro { color: #2E6FF2; font-weight: 600; }
.evidenziato { background: #FEF2E0; }

<div id="main">Contenuto principale</div>

#main { max-width: 1080px; margin: 0 auto; }

html { font-size: 16px; }
.a { font-size: 20px; padding: 1em; }  /* = 20px (relativo al genitore) */
.b { font-size: 20px; padding: 1rem; } /* = 16px (relativo alla radice) */

.box { background-color: #2E6FF2; }
.box-2 { background-color: rgb(46 111 242 / 50%); }
.box-3 { background-color: transparent; } /* default */

.a { background-image: url('foto.jpg'); }
.b { background-image: linear-gradient(135deg, #2E6FF2, #7C5CFC); }
.c {
  background-image:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('foto.jpg'); /* overlay scuro sopra foto */
}

.a { background-position: center; }
.b { background-position: top left; }
.c { background-position: 50% 50%; }
.d { background-position: 20px 40px; }
.e { background-position: right 20px bottom 40px; }

.a { background-clip: border-box; }    /* default: fino al bordo */
.b { background-clip: padding-box; }   /* fino al padding */
.c { background-clip: content-box; }   /* solo il contenuto */
.d {
  background: linear-gradient(90deg, #2E6FF2, #7C5CFC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* testo con gradiente */
}

/* background: colore immagine posizione/size repeat attachment */
.d {
  background: #2E6FF2 url('foto.jpg') center / cover no-repeat fixed;
}

.a { border-width: 2px; }              /* tutti i lati */
.b { border-width: 1px 2px; }           /* vert | orizz */
.c { border-width: 1px 2px 3px 4px; }     /* top right bottom left */
.d { border-top-width: 4px; }          /* solo sopra */

.a { border-color: #2E6FF2; }
.b { border-color: red blue green yellow; } /* top right bottom left */
.c { border-color: currentColor; } /* usa il colore del testo */

.box { border: 2px solid #2E6FF2; }
.misto {
  border-top: 2px solid red;
  border-right: 4px dashed blue;
  border-bottom: 1px dotted green;
  border-left: 3px double orange;
}

.a { border-radius: 8px; }                       /* tutti gli angoli */
.b { border-radius: 8px 16px; }                  /* top-left/bottom-right | top-right/bottom-left */
.c { border-radius: 8px 16px 24px; }             /* top-left | top-right/bottom-left | bottom-right */
.d { border-radius: 8px 16px 24px 32px; }        /* TL TR BR BL */
.pill { border-radius: 999px; }                  /* pillola */
.circle { border-radius: 50%; }                   /* cerchio (se quadrato) */
.ellisse { border-radius: 50% / 30%; }              /* ellisse */

button:focus-visible {
  outline: 3px solid #2E6FF2;
  outline-offset: 2px; /* distanza dal bordo */
}

.a { padding: 20px; }              /* tutti i lati */
.b { padding: 10px 20px; }         /* vert | orizz */
.c { padding: 10px 20px 30px; }    /* top | orizz | bottom */
.d { padding: 10px 20px 30px 40px; } /* top right bottom left */
.e { padding-top: 10px; }          /* solo sopra */
.f { padding-inline: 20px; }       /* proprietà logica: sinistra+destra */

.a { margin: 20px; }              /* tutti i lati */
.b { margin: 0 auto; }             /* centrato orizzontalmente */
.c { margin-top: -20px; }          /* margine negativo */
.d { margin-inline: auto; }        /* centrato (logico) */

p { color: #1B2733; }
.center { text-align: center; }
.justify { text-align: justify; }

.titolo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

body {
  font-family: 'Sora', 'Helvetica Neue', Arial, sans-serif;
}

/* Generic families */
/* serif — con grazie (Times, Georgia) */
/* sans-serif — senza grazie (Arial, Helvetica) */
/* monospace — larghezza fissa (Courier, Consolas) */
/* cursive — corsivo (Comic Sans) */
/* fantasy — decorativo (Impact) */

.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique 15deg; }

.titolo {
  font: italic 700 2rem/1.2 'Sora', sans-serif;
}

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

body { font-family: 'Inter', system-ui, sans-serif; }

a:link { color: #2E6FF2; text-decoration: none; }
a:visited { color: #7C5CFC; }
a:hover { color: #E8792E; text-decoration: underline; }
a:active { color: #D6479B; }

ul {
  list-style-image: url('checkmark.svg');
}

ul { list-style: square inside; }
ul.menu { list-style: none; }

table {
  width: 100%;
  border-collapse: collapse; /* bordi uniti */
  border-spacing: 0;       /* spaziatura (se separate) */
}
th { background: #142850; color: #fff; padding: 12px; text-align: left; }
td { padding: 12px; border-bottom: 1px solid #E1E7F0; }
tbody tr:nth-child(even) { background: #F7F9FC; } /* zebra */
tbody tr:hover { background: #E8F0FE; }              /* hover */

caption { caption-side: bottom; }

.parent { position: relative; }
.badge { position: absolute; top: 10px; right: 10px; }
.sticky { position: sticky; top: 0; z-index: 100; }
.fab { position: fixed; bottom: 20px; right: 20px; }

.modal {
  position: fixed;
  z-index: 9999; /* sta davanti a tutto */
}
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Reset universale: SEMPRE all'inizio del tuo CSS */
*, *::before, *::after { box-sizing: border-box; }

.float-img { float: left; margin-right: 1rem; }
.clear { clear: both; }

/* Clearfix tradizionale */
.clearfix::after { content: ""; display: table; clear: both; }

/* Metodo moderno */
.clearfix { display: flow-root; }

a:hover { color: #E8A34E; text-decoration: underline; }
input:focus { outline: 2px solid #2E6FF2; }
button:active { transform: scale(.97); }
input:checked + label { font-weight: 700; }
input:disabled { opacity: .5; }

li:first-child { font-weight: 700; }
li:last-child { border-bottom: none; }
li:nth-child(even) { background: #EEF2FA; }
li:nth-child(3n) { color: red; }

p:not(.intro) { margin-top: 1rem; }
button:not([disabled]) { cursor: pointer; }

/* :is() — raggruppa selettori */
:is(article, section) :is(h1, h2) { color: #142850; }

/* :where() — come :is() ma specificità 0 */
:where(ul, ol) { padding-left: 1.5rem; }

/* :has() — seleziona il genitore in base al figlio */
form:has(input:invalid) { border-color: red; }
.card:has(img) { padding: 0; }

/* :focus-within — genitore con figlio a fuoco */
fieldset:focus-within {
  border-color: #2E6FF2;
  background: #E8F0FE;
}

/* Freccia sui link esterni */
a[target="_blank"]::after { content: " ↗"; }

/* Linea decorativa sotto h2 */
h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #2E6FF2;
  margin-top: .5rem;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

li::marker {
  color: #2E6FF2;
  font-size: 1.5em;
}

input::placeholder {
  color: #9dabc2;
  font-style: italic;
}

<article class="card">
  <img src="foto.jpg" alt="Descrizione" class="card-img">
  <div class="card-body">
    <h3>Titolo card</h3>
    <p>Breve descrizione del contenuto della card.</p>
    <a href="#" class="btn">Scopri di più</a>
  </div>
</article>

.card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E1E7F0;
  overflow: hidden;
  max-width: 320px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px -15px rgba(46,111,242,.4);
}
.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.card-body { padding: 1.2rem; }
.card-body h3 { margin: 0 0 .5rem; color: #142850; }
.card-body p { color: #566072; font-size: .9rem; margin-bottom: 1rem; }
.btn {
  display: inline-block;
  padding: .5rem 1rem;
  background: #2E6FF2;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: .85rem;
  transition: background .15s;
}
.btn:hover { background: #1e5bd6; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.logo { font-size: 1.3rem; font-weight: 800; color: #2E6FF2; text-decoration: none; }
.menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  color: #1B2733;
  text-decoration: none;
  font-weight: 600;
  padding: .4rem .8rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.menu a:hover { background: #E8F0FE; color: #2E6FF2; }
.menu a.attivo { background: #2E6FF2; color: #fff; }

@media (max-width: 640px) {
  .site-header { flex-direction: column; gap: 1rem; }
  .menu { flex-direction: column; text-align: center; }
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #F7F9FC; line-height: 1.6; }

/* Header sticky */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem; background: #fff;
  border-bottom: 1px solid #E1E7F0;
}

/* Hero */
.hero {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; min-height: 60vh; padding: 2rem;
  background: linear-gradient(135deg, #2E6FF2, #7C5CFC); color: #fff;
}
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 1rem; }
.hero .btn {
  display: inline-block; padding: .8rem 1.6rem;
  background: #fff; color: #2E6FF2; text-decoration: none;
  font-weight: 700; border-radius: 8px;
  transition: transform .2s;
}

/* Container + card */
.container { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }

/* Footer */
.site-footer {
  text-align: center; padding: 2rem 1.5rem;
  background: #1B2733; color: #9dabc2; font-size: .85rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Mobile-first: parti dal piccolo e aggiungi */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; }
}

@media (min-width: 1024px) {
  .container { max-width: 1080px; margin: 0 auto; }
}

/* Combinazioni */
@media (min-width: 768px) and (max-width: 1023px) { /* tablet */ }

/* Preferenze utente */
@media (prefers-color-scheme: dark) { /* tema scuro */ }
@media (prefers-reduced-motion: reduce) { /* disabilita animazioni */ }
@media (orientation: landscape) { /* schermo orizzontale */ }
@media (hover: hover) { /* dispositivo con mouse */ }
@media (pointer: coarse) { /* touch screen */ }

img { max-width: 100%; height: auto; display: block; }
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

/* Immagini con art direction (browser moderni) */
<picture>
  <source media="(min-width: 768px)" srcset="grande.jpg">
  <img src="piccola.jpg" alt="...">
</picture>

/* transition: proprietà durata timing delay */
.btn {
  background: #2E6FF2;
  transition: background .2s ease-in-out;
}

/* Più proprietà */
.card {
  transition: transform .2s, box-shadow .3s;
}

/* Anima tutto (attento alle prestazioni) */
.link { transition: all .2s; }

@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.loader {
  width: 44px;
  height: 44px;
  border: 5px solid #E1E7F0;
  border-top-color: #2E6FF2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp .5s ease-out both; }

:root {
  --primary: #2E6FF2;
  --accent: #7C5CFC;
  --radius: 12px;
  --space: 1rem;
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--space);
}

/* Fallback */
.box { color: var(--testo, black); }

/* Scope locale: sovrascrive --primary solo dentro .box-verde */
.box-verde { --primary: #2FAE66; }

:root {
  --bg: #F7F9FC;
  --ink: #1B2733;
}

html[data-theme="dark"] {
  --bg: #0a1428;
  --ink: #e6ecf5;
}

body {
  background: var(--bg);
  color: var(--ink);
  transition: background .3s, color .3s;
}

/* :is() — riduce ripetizione */
:is(article, section) :is(h1, h2) { color: #142850; }

/* :has() — selettore genitore (rivoluzionario) */
form:has(input:invalid) { border-color: red; }
.card:has(img) { padding: 0; }

/* :focus-visible — outline solo da tastiera */
button:focus-visible {
  outline: 3px solid #2E6FF2;
  outline-offset: 2px;
}

/* :focus-within — genitore con figlio a fuoco */
fieldset:focus-within {
  border-color: #2E6FF2;
  background: #E8F0FE;
}

input::placeholder {
  color: #9dabc2;
  font-style: italic;
}

li::marker {
  color: #2E6FF2;
  font-size: 1.5em;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
}

/* Lineare */
.a { background: linear-gradient(#2E6FF2, #7C5CFC); }
.b { background: linear-gradient(135deg, #2E6FF2, #D6479B); }

/* Radiale */
.c { background: radial-gradient(circle, #2E6FF2, #7C5CFC); }

/* Conica */
.d { background: conic-gradient(#2E6FF2, #7C5CFC, #D6479B, #E8792E, #2E6FF2); }

/* Testo con gradiente */
.gradient-text {
  background: linear-gradient(90deg, #2E6FF2, #7C5CFC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.elemento {
  transform: translateX(20px) rotate(15deg) scale(1.1);
  transform-origin: top left; /* punto di origine */
}

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.plan {
  position: relative;
  background: #fff;
  border: 1px solid #E1E7F0;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.2);
}
.plan--featured {
  border-color: #2E6FF2;
  box-shadow: 0 20px 40px -20px rgba(46,111,242,.5);
  transform: scale(1.03);
}
.plan .badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: #2E6FF2; color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px;
}

:root {
  --bg: #F7F9FC;
  --ink: #1B2733;
  --surface: #fff;
}
html[data-theme="dark"] {
  --bg: #0a1428;
  --ink: #e6ecf5;
  --surface: #152040;
}
body {
  background: var(--bg);
  color: var(--ink);
  transition: background .3s, color .3s;
}

const btn = document.getElementById('themeToggle');
const root = document.documentElement;
btn.addEventListener('click', () => {
  const current = root.getAttribute('data-theme') || 'light';
  root.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
});

.hamburger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 6px; background: none; border: none;
  cursor: pointer;
}
.hamburger span {
  display: block; width: 26px; height: 3px;
  background: #1B2733; border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Mobile-first: parti dal piccolo e aggiungi */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; }
}

@media (min-width: 1024px) {
  .container { max-width: 1080px; margin: 0 auto; }
}

/* Combinazioni */
@media (min-width: 768px) and (max-width: 1023px) { /* tablet */ }

/* Preferenze utente */
@media (prefers-color-scheme: dark) { /* tema scuro */ }
@media (prefers-reduced-motion: reduce) { /* disabilita animazioni */ }
@media (orientation: landscape) { /* schermo orizzontale */ }
@media (hover: hover) { /* dispositivo con mouse */ }
@media (pointer: coarse) { /* touch screen */ }

img { max-width: 100%; height: auto; display: block; }
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

/* Immagini con art direction (browser moderni) */
<picture>
  <source media="(min-width: 768px)" srcset="grande.jpg">
  <img src="piccola.jpg" alt="...">
</picture>

/* transition: proprietà durata timing delay */
.btn {
  background: #2E6FF2;
  transition: background .2s ease-in-out;
}

/* Più proprietà */
.card {
  transition: transform .2s, box-shadow .3s;
}

/* Anima tutto (attento alle prestazioni) */
.link { transition: all .2s; }

@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.loader {
  width: 44px;
  height: 44px;
  border: 5px solid #E1E7F0;
  border-top-color: #2E6FF2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp .5s ease-out both; }

:root {
  --primary: #2E6FF2;
  --accent: #7C5CFC;
  --radius: 12px;
  --space: 1rem;
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--space);
}

/* Fallback */
.box { color: var(--testo, black); }

/* Scope locale: sovrascrive --primary solo dentro .box-verde */
.box-verde { --primary: #2FAE66; }

:root {
  --bg: #F7F9FC;
  --ink: #1B2733;
}

html[data-theme="dark"] {
  --bg: #0a1428;
  --ink: #e6ecf5;
}

body {
  background: var(--bg);
  color: var(--ink);
  transition: background .3s, color .3s;
}

/* :is() — riduce ripetizione */
:is(article, section) :is(h1, h2) { color: #142850; }

/* :has() — selettore genitore (rivoluzionario) */
form:has(input:invalid) { border-color: red; }
.card:has(img) { padding: 0; }

/* :focus-visible — outline solo da tastiera */
button:focus-visible {
  outline: 3px solid #2E6FF2;
  outline-offset: 2px;
}

/* :focus-within — genitore con figlio a fuoco */
fieldset:focus-within {
  border-color: #2E6FF2;
  background: #E8F0FE;
}

input::placeholder {
  color: #9dabc2;
  font-style: italic;
}

li::marker {
  color: #2E6FF2;
  font-size: 1.5em;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
}

/* Lineare */
.a { background: linear-gradient(#2E6FF2, #7C5CFC); }
.b { background: linear-gradient(135deg, #2E6FF2, #D6479B); }

/* Radiale */
.c { background: radial-gradient(circle, #2E6FF2, #7C5CFC); }

/* Conica */
.d { background: conic-gradient(#2E6FF2, #7C5CFC, #D6479B, #E8792E, #2E6FF2); }

/* Testo con gradiente */
.gradient-text {
  background: linear-gradient(90deg, #2E6FF2, #7C5CFC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.elemento {
  transform: translateX(20px) rotate(15deg) scale(1.1);
  transform-origin: top left; /* punto di origine */
}

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.plan {
  position: relative;
  background: #fff;
  border: 1px solid #E1E7F0;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.2);
}
.plan--featured {
  border-color: #2E6FF2;
  box-shadow: 0 20px 40px -20px rgba(46,111,242,.5);
  transform: scale(1.03);
}
.plan .badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: #2E6FF2; color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px;
}

:root {
  --bg: #F7F9FC;
  --ink: #1B2733;
  --surface: #fff;
}
html[data-theme="dark"] {
  --bg: #0a1428;
  --ink: #e6ecf5;
  --surface: #152040;
}
body {
  background: var(--bg);
  color: var(--ink);
  transition: background .3s, color .3s;
}

const btn = document.getElementById('themeToggle');
const root = document.documentElement;
btn.addEventListener('click', () => {
  const current = root.getAttribute('data-theme') || 'light';
  root.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
});

.hamburger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 6px; background: none; border: none;
  cursor: pointer;
}
.hamburger span {
  display: block; width: 26px; height: 3px;
  background: #1B2733; border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}

/* auto-fit: le colonne vuote collassano */
.cards-fit {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

.content { width: calc(100% - 250px); }
h1 { font-size: calc(1.5rem + 2vw); }
.modal { width: 600px; left: calc(50% - 300px); }

h1 { font-size: clamp(1rem, 5vw, 2rem); }
.section { padding: clamp(1rem, 3vw, 3rem); }
.container { width: clamp(320px, 90%, 1200px); }

.card { width: min(300px, 100%); }
.hero { padding: max(2rem, 5vw); }

.btn { background: var(--primary, blue); }
.box { color: var(--custom, var(--primary, #000)); }

.video { aspect-ratio: 16 / 9; width: 100%; }
.avatar { aspect-ratio: 1 / 1; width: 80px; border-radius: 50%; }

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}
.carousel > * {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 80%;
}

.glass {
  background: rgba(255 255 255 / .15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.3);
}

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

.b {
  margin-inline-start: 1rem;
  padding-block-start: 2rem;
  margin-inline: 1rem 2rem;
  margin-block: 1rem;
  inset: 0;
}

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="...family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

.section-lunga {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Blocco */
.card { /* ... */ }

/* Elemento (doppio underscore) */
.card__title { /* ... */ }
.card__body { /* ... */ }

/* Modificatore (doppio trattino) */
.card--featured { /* ... */ }

/* 1. RESET E VARIABILI */
/* 2. BASE (tipografia, body) */
/* 3. LAYOUT (container, grid pagina) */
/* 4. COMPONENTI (bottoni, card, form) */
/* 5. UTILITY (classi monouso) */
/* 6. MEDIA QUERY (mobile-first) */

.dashboard {
  display: grid;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
  gap: 1rem;
  padding: 1rem;
  background: #F7F9FC;
}

.sidebar { grid-area: sidebar; background: #142850; border-radius: 12px; padding: 1.5rem; color: #fff; }
.topbar { grid-area: topbar; background: #fff; border-radius: 12px; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.content { grid-area: content; background: #fff; border-radius: 12px; padding: 1.5rem; }

@media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "topbar"
      "content"
      "sidebar";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 1rem;
}

/* Alcuni item occupano 2 righe */
.gallery > :nth-child(3n) { grid-row: span 2; }
.gallery > :nth-child(5n) { grid-column: span 2; }

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .3s;
}
.gallery img:hover { transform: scale(1.05); }

.card-wrapper {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E1E7F0;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card img { width: 120px; height: 120px; }
}

portfolio/
├── index.html
├── css/
│   └── style.css
└── img/

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio — Mario Rossi</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="site-header">
    <a href="#" class="logo">Mario Rossi</a>
    <nav>
      <a href="#progetti">Progetti</a>
      <a href="#contatti">Contatti</a>
      <button id="themeToggle" type="button" aria-label="Cambia tema">🌓</button>
    </nav>
  </header>

  <section class="hero">
    <h1>Ciao, sono <span class="accent">Mario</span></h1>
    <p>Studente di informatica, appassionato di sviluppo web.</p>
    <a href="#progetti" class="btn">Vedi i miei progetti</a>
  </section>

  <main>
    <section id="progetti">
      <h2>Progetti</h2>
      <div class="cards">
        <article class="card">
          <h3>To-do list</h3>
          <p>App per gestire attività con localStorage.</p>
        </article>
        <article class="card">
          <h3>Meteo API</h3>
          <p>Ricerca meteo per città con API REST.</p>
        </article>
        <article class="card">
          <h3>Quiz interattivo</h3>
          <p>Quiz a risposta multipla con punteggio.</p>
        </article>
      </div>
    </section>

    <section id="contatti">
      <h2>Contattami</h2>
      <form class="contact-form">
        <label for="nome">Nome</label>
        <input type="text" id="nome" required>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <label for="msg">Messaggio</label>
        <textarea id="msg" rows="5" required></textarea>
        <button type="submit" class="btn">Invia</button>
      </form>
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2026 Mario Rossi</p>
  </footer>

  <script>
    const btn = document.getElementById('themeToggle');
    const root = document.documentElement;
    btn.addEventListener('click', () => {
      const current = root.getAttribute('data-theme') || 'light';
      root.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
    });
  </script>
</body>
</html>

/* ============================================================
   1. RESET E VARIABILI
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --ink: #1B2733;
  --ink-soft: #566072;
  --primary: #2E6FF2;
  --accent: #7C5CFC;
  --border: #E1E7F0;
  --radius: 12px;
  --max: 1080px;
}

html[data-theme="dark"] {
  --bg: #0a1428;
  --surface: #152040;
  --ink: #e6ecf5;
  --ink-soft: #9dabc2;
  --border: #253557;
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  transition: background .2s, color .2s;
}

h1, h2, h3 { line-height: 1.2; }
a { color: var(--primary); text-decoration: none; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.site-header, main, .site-footer, .hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.site-header nav {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 60vh;
  gap: 1.2rem;
}

.hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.accent {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   6. BOTTONE
   ============================================================ */
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: .75rem 1.4rem;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s;
}

.btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px var(--accent);
}

/* ============================================================
   7. CARDS
   ============================================================ */
main section { padding: 3rem 1.5rem; }
main h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.2rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 15px 30px -15px rgba(46,111,242,.4);
}

.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); }

/* ============================================================
   8. FORM
   ============================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 520px;
}

.contact-form label {
  font-weight: 600;
  font-size: .9rem;
  margin-top: .5rem;
}

.contact-form input,
.contact-form textarea {
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46,111,242,.2);
}

.contact-form button { align-self: flex-start; margin-top: 1rem; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.site-footer {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--ink-soft);
  font-size: .85rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
  .hero h1 { font-size: 3.5rem; }
  main section { padding: 4rem 2rem; }
}

/* ============================================================
   11. ACCESSIBILITÀ
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}