Passo 1: Base visual
Antes de qualquer layout, definimos a identidade visual: cores, tipografia e um reset básico que evita surpresas de espaçamento.
Estudar esta lição interativa →Chegou a hora da ponte prometida desde o Módulo 1: vamos retomar a mesma página de perfil da Ana Souza, construída no projeto final do curso de HTML (header com nav, seção sobre mim, projetos e formulário de contato), estruturalmente completa e semântica, mas visualmente crua. Nosso trabalho agora é dar vida a ela, com o mesmo HTML de antes, só acrescentando CSS por cima.
O primeiro passo, antes de qualquer alinhamento ou cor específica, é uma base: box-sizing: border-box em tudo (Módulo 2), uma paleta de cores definida com variáveis :root (para reaproveitar a mesma cor de marca em vários lugares sem repetir o código hexadecimal), e uma fonte e um line-height confortáveis no body, que todo o resto vai herdar (Módulos 3 e 4).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ainda sem layout de header/nav; só a base: reset, cores e tipografia herdada pelo body.
:root { --cor-marca: #0ea5e9; } define uma variável reaproveitável com var(--cor-marca) em qualquer regra depois. Se a cor de marca mudar amanhã, é uma edição num lugar só, refletida em toda a página, o mesmo princípio de manutenção que vimos no CSS externo, do Módulo 1.
Repare que a paleta tem --cor-superficie (fundo dos cartões), --cor-borda e --cor-header, e não só "cores de verdade" como --azul. Nomear pelo papel evita um problema clássico: se a barra do topo reaproveitasse --cor-texto como fundo (o que "funciona" no tema claro), ao trocar o tema para escuro o texto ficaria claro e a barra também, e o conteúdo some. Com um token por papel, cada tema só troca o valor de cada papel.