Laboratório prático: monte um mini sistema de tema
Combine tokens, layout e padrões de interação em um fluxo real.
- Compor regras reutilizáveis para um conjunto de componentes.
No dia a dia, CSS combina múltiplos fundamentos em um único arquivo: tokens, grid, tipografia e estados.
1:root {
2 --brand: #165b33;
3 --surface: #f4f8f5;
4}
5
6.cards {
7 display: grid;
8 grid-template-columns: repeat(2, 1fr);
9 gap: 16px;
10}
11
12.card {
13 background: var(--surface);
14 color: var(--brand);
15}Two themed cards with consistent spacing and color
Padronizar valores e seletores reduz retrabalho e facilita evolução de interface.
Principais conclusões
Compor regras reutilizáveis para um conjunto de componentes.
Prefira regras simples e reutilizáveis.
Padronize tokens e estados para facilitar evolução visual.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em CSS
Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.
Tematize uma grade de cards
Defina --brand/--surface em :root, torne .cards grid de 2 colunas com gap 16px, e aplique .card com fundo var(--surface) e texto var(--brand).
- Estilos da grade temática
Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…