Cores, tipografia e modelo de caixa
Aplique cores com valores hex, rgb e hsl, escolha fontes, defina tamanhos e alturas de linha e use margem, borda e preenchimento para espaçar elementos.
Cores, tipografia e modelo de caixa é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Valores de cor do CSS
CSS aceita vários formatos de cor. Use o formato mais claro para o seu contexto: códigos hexadecimais para cores de marca, hsl() para ajustes fáceis de cor, rgb() para valores programáticos e cores nomeadas para prototipagem rápida.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Cores e imagens de fundo
Defina os fundos dos elementos com background-color. Use background-image com gradientes ou URLs. A forma abreviada background combina cor, imagem, posição, tamanho e repetição em uma única declaração.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Propriedades de fonte
Controle a tipografia com: font-family (família tipográfica), font-size (em, rem, px), font-weight (100–900), font-style (itálico), line-height (proporção de legibilidade) e letter-spacing (espaçamento entre letras).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Propriedades de texto
Estilos adicionais de texto: text-align (left, center, right, justify), text-decoration (underline, line-through, none), text-transform (uppercase, capitalize) e text-overflow: ellipsis para truncamento.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px é absoluto. em é relativo ao tamanho da fonte do próprio elemento (e se propaga pela cascata). rem é relativo ao tamanho da fonte raiz (previsível). Use rem para a maioria dos tamanhos, respeitando as preferências de fonte do usuário.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */O modelo de caixa
Todo elemento HTML é uma caixa retangular com quatro camadas: conteúdo (as dimensões reais do elemento), preenchimento (espaço interno à borda), borda e margem (espaço externo à borda).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Por padrão (content-box), o preenchimento e a borda são adicionados à largura declarada. Com box-sizing: border-box, o preenchimento e a borda são incluídos na largura declarada — o que quase sempre é o que você deseja.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Colapso de margens
As margens verticais entre elementos de bloco adjacentes colapsam — somente a margem maior é aplicada. As margens de um elemento pai e de seu primeiro ou último filho também colapsam. Filhos de Flexbox e de Grid não colapsam margens.
Abreviação de preenchimento
A forma abreviada padding: top right bottom left define todos os lados. Dois valores definem os lados vertical e horizontal. Três definem os lados superior, horizontal e inferior.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Propriedades de borda
Defina bordas com a forma abreviada border: width style color. Lados individuais: border-top e assim por diante. Use border-radius para cantos arredondados. outline é semelhante, mas não afeta o layout.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Transbordamento
overflow: hidden recorta o conteúdo que ultrapassa o tamanho do elemento. overflow: scroll adiciona barras de rolagem. overflow: auto adiciona barras de rolagem somente quando necessário. Use overflow-x e overflow-y para controlar os eixos de forma independente.
Verificação rápida
Com box-sizing: border-box e width: 300px; padding: 20px; border: 2px solid, qual é a largura total renderizada do elemento?
Recapitulação: cores, tipografia e modelo de caixa
Defina cores com valores hexadecimais, rgb ou hsl. Aplique fontes com família, tamanho, peso e altura da linha. Todo elemento é uma caixa: conteúdo + preenchimento + borda + margem. Ative box-sizing: border-box globalmente para obter tamanhos previsíveis.
Perguntas Frequentes
A aula “Cores, tipografia e modelo de caixa” é grátis?
Sim — o texto completo de “Cores, tipografia e modelo de caixa” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Cores, tipografia e modelo de caixa”?
Aplique cores com valores hex, rgb e hsl, escolha fontes, defina tamanhos e alturas de linha e use margem, borda e preenchimento para espaçar elementos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Cores, tipografia e modelo de caixa”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Seletores e a cascata
- Cores, tipografia e modelo de caixa
- Noções básicas de display: block, inline, flex e grid
- Posicionamento: relative, absolute, fixed e sticky