Estilize uma página pequena

A página da padaria do curso de HTML ganha cores, espaçamento e layout com cerca de 40 linhas de CSS, e o HTML não muda em nada.

Comece por decisões, não por regras

Antes de escrever regras, tome um punhado de decisões: uma cor de destaque, uma cor de texto e um fundo com contraste suficiente, uma lista de fontes, um tamanho de base e um passo de espaçamento que se repete em todo lugar (por exemplo 8, 16 e 24 pixels). Uma página que reaproveita poucos valores parece calma e intencional; uma página em que cada caixa tem uma margem um pouco diferente parece bagunçada, mesmo que ninguém saiba dizer por quê. O CSS tem um recurso feito para isso, as propriedades personalizadas.

Propriedades personalizadas

Uma propriedade personalizada é um nome que você inventa, começando com dois hifens, que guarda um valor: --accent: #1a5fb4;. Defina as suas decisões uma vez em :root, que é o elemento html, e use-as em qualquer lugar com var(): background: var(--accent);. Propriedades personalizadas são herdadas como as propriedades de texto, então todo elemento consegue ler as que foram definidas na raiz. Mudar a cor de destaque do site inteiro passa a ser editar uma linha. Você também pode redefinir uma propriedade dentro de uma media query, por exemplo para trocar as cores com prefers-color-scheme: dark.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

Lendo a folha de estilo de cima para baixo

A folha de estilo acima usa algo de quase todas as unidades. A raiz guarda as decisões. body define a fonte, a altura da linha e as cores uma vez, e a herança as leva para cada parágrafo. O cabeçalho é uma linha flex com quebra, então o menu desce para baixo do nome num celular estreito em vez de ficar espremido. main tem um max-width e margin: 0 auto, o que mantém as linhas legíveis e centraliza o conteúdo em telas largas. Os cartões usam o padrão de grid auto-fill, então passam de uma coluna para várias sem media query, e as imagens são fluidas. O botão ganha uma cor de hover e, igualmente importante, um contorno de foco visível para quem usa o teclado.

Confira em telas de verdade

Testar CSS é olhar. Abra a página numa janela estreita (320 pixels para o teste de refluxo da WCAG) e numa larga, e procure rolagem lateral e texto encostado nas bordas. Dê zoom de 200 por cento. Aperte Tab pela página e veja se você sempre enxerga onde está o foco. Confira o contraste do texto e dos botões nas ferramentas de desenvolvedor. Ligue o modo escuro ou a redução de movimento do seu sistema se você estilizou para eles. As ferramentas de desenvolvedor do navegador deixam você mudar qualquer valor ao vivo e ver o modelo de caixa de qualquer elemento, que é o jeito mais rápido de responder por que algo está onde está.

Daqui para a frente, as mesmas peças crescem para qualquer site. Projetos maiores dividem a folha de estilo em arquivos, dão nome às classes pelo que o componente é (cartão, botão, cabeçalho do site) e mantêm uma lista curta de propriedades personalizadas compartilhadas, mas as regras por baixo são as destas nove unidades.