Cores e unidades
Cor e tamanho aparecem em praticamente toda propriedade de CSS. Conhecer os formatos evita adivinhação.
Estudar esta lição interativa →Antes de seguir para layout, vale fixar dois vocabulários que você vai usar sem parar: como escrever uma cor e como escrever um tamanho. CSS aceita várias formas de cada um, e escolher a certa depende do contexto.
Cor por nome
coral, navy, tealCerca de 140 nomes prontos. Práticos para testar rápido, mas limitados para uma paleta de marca.
Hexadecimal
#0ea5e9O formato mais comum em projetos reais: seis dígitos (dois para vermelho, dois para verde, dois para azul). Há também a forma curta de 3 dígitos (#0af, cada dígito vale dois iguais) e as de 4 e 8 dígitos, que acrescentam a transparência (#0ea5e980).
rgb()
rgb(14, 165, 233)Os mesmos três canais de cor, em números de 0 a 255, às vezes mais fácil de ajustar manualmente.
hsl()
hsl(199, 89%, 48%)Descreve a cor por matiz (0 a 360 graus no círculo de cores), saturação e luminosidade. É ótimo para criar variações da mesma cor: basta mexer na luminosidade para clarear ou escurecer.
Para tamanhos, três unidades cobrem a grande maioria dos casos: px (pixel, um valor fixo e absoluto), % (porcentagem, relativa ao elemento pai) e rem (relativa ao tamanho de fonte raiz da página, ótima para textos que precisam escalar de forma consistente). Veja as três lado a lado:
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Uma caixa com largura fixa (px), uma com largura relativa (%) e uma em rem (relativa à fonte raiz).
Um exemplo de produto real: o texto do corpo de quase todo site bem construído usa rem para o tamanho da fonte, exatamente para respeitar a configuração de acessibilidade do navegador (quem aumenta a fonte padrão do sistema por dificuldade visual vê o site inteiro crescer proporcionalmente). Já a largura de um contêiner central costuma usar % ou max-width, para se adaptar ao tamanho da tela, tema que aprofundamos no módulo de responsividade.
Esquecer a unidade num valor que precisa dela (escrever width: 200 em vez de width: 200px) faz o navegador simplesmente ignorar a propriedade inteira, sem aviso nenhum na tela. Se uma propriedade parece não fazer nada, confira primeiro se a unidade foi esquecida.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste cor e unidade de largura.