trilha UFPE
O programa
Turmas
Projetos
Materiais
Conheça o Trilha
Inscreva-se
EN
Materiais
Materiais
· Frontend
3. CSS Fundamentos
17 min de leitura
→
Anterior
2. HTML Estrutura e Semântica
Próximo
4. CSS Responsividade
→
Nesta página
3.1. O que é CSS e por que ele existe
Separação de responsabilidades (conteúdo x apresentação)
Como o navegador combina HTML + CSS (visão geral: DOM, CSSOM e renderização)
A ideia de regra CSS: seletor + declarações
Conceitos-base: Cascata, Especificidade e Herança
Cascata
Especificidade
Herança
3.2. Como aplicar CSS (arquivo externo)
Por que fica no `<head>`?
Ordem de carregamento e prioridade (múltiplos arquivos)
Boas práticas simples de organização
Evitar `style=""` inline — e por quê
3.3. Seletores fundamentais (tag, classe, id) => e o jeito certo de usar
Seletores de tipo (tag)
Seletor de classe (`.`)
Seletor de id (`#`)
Seletores combinados simples (descendente)
Agrupamento e encadeamento
Boas práticas de naming (semântica)
Pseudo-classes essenciais: `:hover` e `:focus`
3.4. Box Model
Dimensões reais: `width/height` vs espaço ocupado
`box-sizing`: `content-box` vs `border-box`
Colapso de margens (introdução)
`overflow`: quando o conteúdo “vaza” da caixa
Como diagnosticar box model
3.5. Propriedades essenciais
Cores
Tamanhos
Espaçamento
Bordas
Sombra (acabamento leve)
3.6. Tipografia básica
`font-family` e fallback fonts
`font-size`, `font-weight`, `line-height`
Alinhamento e detalhes
Noção de “escala tipográfica”
3.7. Unidades (px, %, rem)
`px` (pixel CSS no mundo moderno)
`%` (relativo a quê?)
`rem` (relativo à raiz)
Recomendação prática (regra de bolso)
3.8. display e fluxo básico (layout sem magia)
Fluxo normal (document flow)
`display: block`, `inline`, `inline-block`
“Por que meu elemento não aceita `width`?”
`display: none` (e a diferença entre “sumir” e “invisível”)
Teaser: posicionamento
3.9. Erros comuns e confusões clássicas
3.10. Glossário rápido
3.11. Resumo final
3.12. Projeto Prático