UA4 — CSS: Fundamentos — Responsive Web Development

UA4 — CSS: Fundamentos

CSS (Cascading Style Sheets) controla a apresentação visual do HTML — cores, fontes, espaçamentos, layout e muito mais.

CSS Visual Anatomy — capa — A Anatomia Visual da Web: Dominando o CSS

HTML (Planta Baixa) vs CSS (Pintura e Decoração) — HTML define estrutura; CSS define apresentação

Como aplicar CSS

Método	Como	Quando usar
Externo	`<link rel=“stylesheet” href=“style.css”>`	Sempre — é o padrão
Interno	`<style>` no `<head>`	Prototipação rápida
Inline	`style=”…”` na tag	Exceção — evitar

Anatomia de uma regra CSS: seletor, propriedade, valor — Anatomia de uma regra CSS

CSS inline, interno e externo — comparativo — Inline (evite) → Interno (restrito) → Externo (profissional)

Seletores

/* Tag */
p { color: red; }

/* Classe */
.destaque { font-weight: bold; }

/* ID */
#cabecalho { background: #333; }

/* Descendente */
nav a { text-decoration: none; }

/* Pseudo-classe */
a:hover { color: blue; }
li:first-child { font-weight: bold; }

/* Pseudo-elemento */
p::first-line { font-size: 1.2em; }

Classes e IDs — bairros e CPFs dos elementos

Seletores básicos: ID, Classe, Elemento, Universal — Arsenal de miras: seletores ID, classe, elemento e universal

Pseudo-classes e pseudo-elementos — Pseudo-classes (estado) e pseudo-elementos (partes específicas)

Box Model

Todo elemento HTML é uma caixa com quatro áreas:

┌─────────────────────────────┐ ← margin
│  ┌───────────────────────┐  │ ← border
│  │  ┌─────────────────┐  │  │ ← padding
│  │  │    CONTEÚDO     │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

.caixa {
  width: 300px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 24px auto;  /* auto centraliza horizontalmente */
  box-sizing: border-box; /* padding incluso na width */
}

Box Model: Content, Padding, Border, Margin — O segredo de tudo: Content → Padding → Border → Margin

Especificidade

Quando há conflito de regras CSS, vence a de maior especificidade:

Seletor	Especificidade
`style=""` (inline)	1,0,0,0 — ganha sempre
`#id`	0,1,0,0
`.classe`, `[attr]`, `:pseudo`	0,0,1,0
tag (`p`, `div`…)	0,0,0,1
`*` (universal)	0,0,0,0

Dica prática

Prefira classes a IDs no CSS — são reutilizáveis e causam menos problemas de especificidade.

Comparativo: CSS externo vs interno vs inline

Característica	CSS Externo	CSS Interno	CSS Inline
Manutenção	Fácil — uma mudança reflete em todas as páginas	Moderada — mudanças refletem só na página atual	Difícil — mudanças em cada elemento
Consistência	Alta — estilos aplicados uniformemente	Moderada — só na página atual	Baixa — propenso a inconsistências
Tempo de carregamento	Melhor — pode ser cacheado pelo navegador	Médio — carrega junto com o documento	Pior — cada elemento carrega seus próprios estilos
Organização do código	Alta — separação clara conteúdo/estilo	Média — conteúdo e estilo no mesmo arquivo	Baixa — conteúdo e estilo misturados

Unidades de medida em CSS

Unidade	Tipo	O que representa
`px`	Absoluta	Pixel — tamanho fixo na tela
`%`	Relativa	Porcentagem do elemento pai
`em`	Relativa	Relativo ao font-size do elemento pai
`rem`	Relativa	Relativo ao font-size do elemento raiz (`:root`)
`vw`	Relativa	1% da largura da viewport
`vh`	Relativa	1% da altura da viewport
`ch`	Relativa	Largura do caractere “0” na fonte atual
`fr`	Relativa (Grid)	Fração do espaço disponível no Grid

Propriedade `float`

O float era o principal método de layout antes do Flexbox e Grid — ainda aparece em código legado:

.imagem {
  float: left;   /* left | right | none */
  margin: 0 1rem 1rem 0;
}

/* Limpa o float para o próximo elemento */
.container::after {
  content: "";
  display: block;
  clear: both;
}

Tipos de seletores CSS — resumo

Seletor	Exemplo	Seleciona
Universal	`*`	Todos os elementos da página
Tag (tipo)	`p`, `h1`	Todos os elementos daquele tipo
Classe	`.destaque`	Elementos com `class=“destaque”`
ID	`#cabecalho`	Elemento com `id=“cabecalho”` (único)
Descendente	`nav a`	`a` dentro de qualquer `nav`
Filho direto	`ul > li`	`li` filho direto de `ul`
Pseudo-classe	`a:hover`	Elemento em determinado estado
Pseudo-elemento	`p::first-line`	Parte específica do elemento
Atributo	`[type=“email”]`	Elementos com aquele atributo/valor

Práticas Modernas — CSS

CSS Variables (Custom Properties): :root { --cor-primaria: #3b82f6; } — centralize valores repetidos e altere o tema de toda a página mudando uma variável. Utility-first (Tailwind CSS): tendência que usa classes utilitárias (flex, p-4, text-lg) direto no HTML em vez de criar classes semânticas no CSS — produtivo mas gera mais HTML verboso. CSS Modules / Scoped CSS: em projetos com React/Vue, escopo de estilo por componente evita conflitos de nomes de classe globalmente. Evite !important: resolve conflito de especificidade na força bruta — prefira refatorar a hierarquia de seletores.

Dicas para a prova — UA4

As três formas de aplicar CSS: inline (atributo style), interna (tag <style> no <head>) e externa (arquivo .css via <link>).
Bloco de declaração CSS: seletor { propriedade: valor; } — seletor define o alvo; propriedade e valor definem o estilo.
O seletor universal (*) seleciona todos os elementos — especificidade zero.
float: left e float: right — empurra o elemento para a borda e permite que o texto flua ao redor.
Ordem de especificidade: inline > #id > .classe > tag > *.
CSS externo é o método recomendado para projetos reais — reutilizável, cacheável e de fácil manutenção.

Referências bibliográficas desta UA

Serpa, M. S. Ferramentas de Desenvolvimento Web. Porto Alegre: SAGAH, 2024.
Bertagnolli, S. C.; Miletto, E. M. Desenvolvimento de Software II. Porto Alegre: Bookman, 2014.

UA3 — Formulários HTML5 UA5 — CSS3: Avançado e Responsividade