Saltar para o conteΓΊdo principal
← 🎨 CSS as a design systemΒ·MΓ³dulo B3 Β· LiΓ§Γ£o 13
TarefaQuick 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.

πŸ”’

Regista-te para comeΓ§ar a programar

A teoria estΓ‘ aberta a todos. O editor, a prΓ©-visualizaΓ§Γ£o e o check desbloqueiam-se com um teste gratuito de 7 dias β€” cartΓ£o obrigatΓ³rio, cancelΓ‘vel a qualquer momento.

Registar β€” teste grΓ‘tis β†’

As primeiras 10 liΓ§Γ΅es de cada trilha sΓ£o grΓ‘tis. Sem cartΓ£o necessΓ‘rio.

← AnteriorPrΓ³xima liΓ§Γ£o β†’

Recebe uma dica de Python ou web por dia β€” por email

Curto, escrito Γ  mΓ£o, sem spam. Cancela a subscriΓ§Γ£o num clique.