Vai al contenuto principale
โ† ๐ŸŽจ CSS as a design systemยทModulo B3 ยท Lezione 13
CompitoQuick recap. Write CSS that uses all 4 B1-B3 fundamentals. Define :root with --gap: 12px. Apply box-sizing: border-box to *. Make .row a grid with grid-template-columns: 100px 100px 100px and gap: var(--gap). The 4 checks verify each.

Recap: Cascade, box, layout, grid

50 XP5 min
Teoria

Quick recap โ€” Modules B1-B3

Box, layout engines, grid. The 4 things you write in every real stylesheet:

  1. `:root` custom properties โ€” design tokens (--space-md, --color-bg) that flow through the cascade.
  2. `var(--token)` โ€” consume the token. Browsers fall back to the second arg if undefined.
  3. `box-sizing: border-box` โ€” width includes padding+border. Universal selector, once, on *.
  4. `display: grid` + `grid-template-columns` โ€” the modern default. Flex is for one axis, grid for two.

If any feels random, redo B1-04 / B1-06 / B2-09 / B3-02 then come back.

๐Ÿ”’

Iscriviti per iniziare a programmare

La teoria รจ aperta a tutti. Editor, anteprima e check si sbloccano con una prova gratuita di 7 giorni โ€” carta richiesta, annullabile in qualsiasi momento.

Iscriviti โ€” prova gratuita โ†’

Le prime 10 lezioni di ogni percorso sono gratuite. Nessuna carta richiesta.

โ† PrecedenteProssima lezione โ†’

Ricevi un consiglio Python o web al giorno โ€” via email

Breve, scritto a mano, niente spam. Disiscriviti in un clic.