Trilha de Aprendizado de CSS

Roteiro CSS para 2026. Dos seletores e box model ao Flexbox, Grid, animações e engenharia CSS moderna. 121 tópicos com prática hands-on.

CSS transforma HTML simples em interfaces polidas e responsivas. Este roadmap cobre o espectro completo — de seletores e box model até sistemas de layout modernos como Flexbox e Grid, passando por design responsivo, animações e variáveis CSS. Você também aprenderá boas práticas de engenharia como convenções de nomenclatura, padrões de arquitetura e otimização de performance para manter folhas de estilo sustentáveis em larga escala.

Última atualização: 2026-10-08

Tema

Trilha de Aprendizado de CSS

Fontes
Cores
Medição e Herança
Comprimento e Porcentagens
Roadmaps Relacionados
Funções CSS
Técnicas de Layout
CSS — Tutorial de CSS · Sintaxe CSS
Introdução — Sintaxe CSS
Fundamentos de CSS — Sintaxe CSS
Regras — Sintaxe CSS
Seletores Simples — Seletores CSS
Seletores Combinadores — Seletores CSS
Seletores de Atributo — Seletores CSS
Estilização de Texto — Texto e Fontes CSS
Especificidade CSS — Seletores CSS
Opacidade — Display e Visibility CSS ·
Valores e Unidades CSS
Fundo — Fundo CSS · · ·
Display — Display e Visibility CSS ·
Modelo de Caixa — Modelo de Caixa CSS ·
Posição — Posicionamento CSS ·
Contexto de Empilhamento — Posicionamento CSS ·
Tabelas
Listas
Imagens e Filtros
Pseudo-classes
Pseudo-elementos
Layouts — Modelo de Caixa CSS
Animações — Animação CSS · CSS Transition e Filter · CSS Transform ·
Design Responsivo — Fundamentos do CSS Responsivo · Layout Responsivo CSS
Metodologias — Convenção de Nomenclatura BEM CSS
Atributos Padrão
Frontend — Ver Roadmap
JavaScript — Ver Roadmap
HTML — Ver Roadmap
O que é CSS? — Sintaxe CSS
Desenvolvimento Frontend
HTML — Tutorial de HTML
CSS — Sintaxe CSS
JavaScript — Tutorial de JavaScript
Propriedades e Valores — Sintaxe CSS
Seletores — Seletores CSS
Declarações — Sintaxe CSS
Famílias de Fontes (font-family) — Texto e Fontes CSS
Estilos Inline — Métodos de Introdução do CSS
Estilos Internos — Métodos de Introdução do CSS
Estilos Externos — Métodos de Introdução do CSS
Ordem de Cascata — Seletores CSS
Elemento (element) — Sintaxe CSS
Altura de Linha — Texto e Fontes CSS ·
Sombras de Texto — Texto e Fontes CSS ·
Variante de Fonte (font-variant) — Texto e Fontes CSS
Face de Fonte (@font-face) — Texto e Fontes CSS
Estilo de Fonte (font-style) — Texto e Fontes CSS
Atalho de Fonte (font) — Texto e Fontes CSS
Tamanho de Fonte (font-size) — Texto e Fontes CSS
Cor de Fundo — Cores CSS ·
Em Linha (inline) — Display e Visibility CSS
Bloco (block) — Display e Visibility CSS
Imagem de Fundo — Fundo CSS
Gradiente de Fundo — Fundo CSS ·
Posição de Fundo — Fundo CSS
Em Linha-Bloqueio (inline-block) — Display e Visibility CSS
none — Display e Visibility CSS
Visibilidade (visibility) — Display e Visibility CSS
Tabela (table)
Unidades CSS
Palavras-chave Globais
RGB (rgb) — Cores CSS
RGBA (rgba) — Cores CSS
HSL (hsl) — Cores CSS
HSLA (hsla) — Cores CSS
Unidades de Comprimento Absoluto
Classe (class) — Seletores CSS
ID (id) — Seletores CSS
Universal (*) — Seletores CSS
Agrupamento (grouping) — Seletores CSS
Irmão Adjacente (+) — Seletores CSS
Classe (class) — Seletores CSS
Filho (child) — Seletores CSS
Irmão Posterior (~) — Seletores CSS
Transformação de Texto — Texto e Fontes CSS
Espaçamento de Texto — Texto e Fontes CSS
Alinhamento de Texto — Texto e Fontes CSS ·
Decoração de Texto — Texto e Fontes CSS ·
Cor — Cores CSS ·
Direção — Texto e Fontes CSS ·
Anexo de Fundo — Fundo CSS
Largura/Altura (width/height) — Largura, Altura e Overflow CSS · · ·
Posição Relativa (relative) — Posicionamento CSS ·
Posição Absoluta (absolute) — Posicionamento CSS ·
Posição Adesiva (sticky) — Posicionamento CSS ·
Posição Fixa (fixed) — Posicionamento CSS ·
Posição Estática (static) — Posicionamento CSS ·
Preenchimento (padding) — Margens e Preenchimento CSS ·
Margem (margin) — Margens e Preenchimento CSS ·
Borda (border) — Bordas e Border Radius CSS ·
Contorno (outline) — Bordas e Border Radius CSS ·
Sombras de Caixa (box-shadow) — Gradientes e Sombras CSS ·
Cores Nomeadas (named) — Cores CSS
HEX (#hex) — Cores CSS
Unidades de Comprimento Relativo
Outros Tipos de Unidade
Funções Matemáticas
Funções de Comparação
Funções de Propriedade Personalizada — Variáveis CSS
Funções de Referência de Atributo
Layout de Fluxo — Modelo de Caixa CSS
Flutuação — Float e Clear CSS · ·
Layout de Múltiplas Colunas
Flexbox (flex) — Contêiner Flexbox CSS · Itens Flexbox CSS · · · · ·
Grid (grid) — Contêiner Grid CSS · Itens Grid CSS · Prática Grid CSS · · · · ·
Media Queries — Fundamentos do CSS Responsivo
Container Queries
Tipografia Responsiva — Fundamentos do CSS Responsivo
Sass
CSS Modules
CSS-in-JS
PostCSS
BEM — Convenção de Nomenclatura BEM CSS