CSS e design responsivo

Identificação

• Duração: 2 horas
• Tipo: teoria aplicada e laboratório
• Entrega: landing page estilizada para celular e desktop
• Código de referência: ../exemplos/aula-1.2/index.html
• Folha de estilos: ../exemplos/aula-1.2/assets/styles.css

Introdução

O que é CSS?

CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata. É a linguagem utilizada para controlar apresentação, cores, fontes, espaçamento, tamanhos, posicionamento e layout dos elementos HTML.

HTML declara que um conteúdo é um botão. CSS define como esse botão será apresentado:

button {
  color: white;
  background: blue;
  border-radius: 8px;
}

Por que o nome possui “cascata”?

Uma página pode receber regras de várias fontes. A cascata é o conjunto de critérios utilizado pelo navegador para decidir qual regra será aplicada quando mais de uma declaração tenta modificar a mesma propriedade.

Não se trata apenas de “a última regra sempre vence”. Origem, importância, especificidade e ordem participam da decisão.

O que é design responsivo?

É a capacidade da interface de se adaptar ao espaço disponível. A mesma página deve continuar utilizável em celular, tablet, notebook, monitor grande e situações de zoom.

Responsividade não significa diminuir tudo. Significa reorganizar conteúdo e controles de maneira apropriada:

Celular -> uma coluna, controles confortáveis, leitura vertical
Desktop -> mais colunas quando houver espaço e benefício

CSS funciona diretamente no navegador. Não é necessário utilizar um framework para criar uma página responsiva.

Objetivos

Ao final da aula, o aluno deverá conseguir:

1. explicar cascata, herança e especificidade;
2. utilizar seletores sem acoplar o CSS excessivamente ao HTML;
3. criar um sistema visual com propriedades personalizadas;
4. compreender o box model;
5. construir layouts com Flexbox e Grid;
6. aplicar a estratégia mobile first;
7. criar estados acessíveis de foco e interação;
8. respeitar preferências de redução de movimento;
9. testar a interface em diferentes larguras.

Pré-requisitos

• conclusão das aulas 1.1 e 1.2;
• estrutura semântica da landing page;
• formulário com rótulos associados;
• navegação interna funcionando.

Pergunta orientadora

Como transformar uma estrutura semântica em uma interface agradável sem perder acessibilidade, clareza ou capacidade de manutenção?

Roteiro sugerido

1. Conectando o CSS

Dentro do head:

<link rel="stylesheet" href="assets/styles.css">

O navegador realizará uma nova requisição para carregar a folha de estilos.

Crie:

knowledge-ai/
|-- index.html
`-- assets/
    |-- fluxo-conhecimento.svg
    `-- styles.css

2. Anatomia de uma regra

.hero__title {
  max-width: 12ch;
  color: #ffffff;
  font-size: 4rem;
}

• .hero__title é o seletor;
• color é uma propriedade;
• #ffffff é o valor;
• cada combinação de propriedade e valor é uma declaração.

3. Cascata

Quando mais de uma regra afeta o mesmo elemento, o navegador precisa decidir qual será aplicada.

Essa decisão considera:

1. origem e importância;
2. especificidade;
3. ordem de declaração.

Exemplo:

p {
  color: #44546a;
}

.hero__description {
  color: #d6deea;
}

O parágrafo que possui a classe hero__description recebe a segunda cor porque o seletor é mais específico.

Evite competir com o próprio CSS

/* Difícil de manter */
body main section#recursos article h3 {
  color: blue !important;
}

Prefira:

.feature-card__title {
  color: var(--color-primary);
}

4. Herança

Algumas propriedades, como color e font-family, normalmente passam do elemento pai para seus descendentes.

body {
  color: #14213d;
  font-family: system-ui, sans-serif;
}

Outras propriedades, como margin, border e width, não são herdadas normalmente.

Utilize o DevTools para observar quais regras foram herdadas e quais foram sobrescritas.

5. Box model

Todo elemento é representado como uma caixa:

margin
  border
    padding
      conteúdo

Adote:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Com border-box, largura e altura incluem padding e borda, tornando o dimensionamento mais previsível.

6. Propriedades personalizadas

Defina os principais tokens visuais em :root:

:root {
  --color-ink: #122033;
  --color-muted: #647187;
  --color-primary: #3156d8;
  --color-accent: #32d5c8;
  --color-surface: #ffffff;
  --color-surface-soft: #f4f7fb;
  --radius-card: 20px;
  --content-width: 1120px;
}

Uso:

.button {
  color: var(--color-surface);
  background: var(--color-primary);
  border-radius: var(--radius-card);
}

Benefícios

• consistência;
• manutenção;
• temas;
• menor repetição;
• decisões visuais explícitas.

7. Unidades

Exemplo de título fluido:

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
}

clamp define valor mínimo, preferencial e máximo.

8. Container

Um container impede que o conteúdo fique excessivamente largo:

.container {
  width: min(calc(100% - 2rem), 70rem);
  margin-inline: auto;
}

• 100% - 2rem cria espaço nas laterais;
• 70rem limita a largura;
• margin-inline: auto centraliza.

9. Flexbox

Flexbox é adequado para organizar elementos em uma dimensão principal.

Exemplo no cabeçalho:

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Aplicações:

• cabeçalhos;
• navegações;
• grupos de botões;
• alinhamento de ícone e texto;
• linhas que podem quebrar.

10. Grid

Grid é adequado para linhas e colunas.

.feature-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

No celular existe uma coluna. Em telas maiores, três colunas.

11. Mobile first

Mobile first significa escrever primeiro as regras para telas menores e adicionar melhorias conforme o espaço aumenta.

.hero__content {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .hero__content {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
}

Isso não significa criar uma versão reduzida ou inferior. O conteúdo e os fluxos essenciais continuam disponíveis.

12. Imagens responsivas

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Os atributos width e height no HTML continuam úteis: ajudam o navegador a reservar espaço antes do arquivo terminar de carregar.

13. Estados interativos

Links, botões e campos precisam comunicar estados.

.button:hover {
  background: var(--color-primary-dark);
}

.button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

input:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}

Não dependa apenas de cor para comunicar uma informação importante.

Foco

Defina uma alternativa visível:

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

14. Contraste

O texto precisa se diferenciar do fundo.

Cuidados:

• cinza muito claro em fundo branco;
• texto sobre imagens;
• botões com texto sem contraste;
• placeholders usados como informação essencial;
• estados representados apenas por mudança sutil de cor.

Utilize as ferramentas do navegador para conferir o contraste das combinações principais.

15. Movimento

Animações devem ser sutis e opcionais.

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Essa preferência ajuda pessoas que sentem desconforto com movimento.

16. Laboratório guiado

Passo 1 - Reset mínimo

Adicione:

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

Passo 2 - Sistema visual

Defina:

• cores;
• largura máxima;
• raios;
• sombras;
• fonte;
• espaçamento.

Passo 3 - Cabeçalho

Utilize Flexbox para:

• alinhar marca e navegação;
• permitir quebra em telas pequenas;
• criar estados de hover e foco.

Passo 4 - Hero

No celular:

• texto acima da figura;
• botões com área confortável;
• título fluido.

No desktop:

• texto e figura em colunas;
• largura de leitura controlada.

Passo 5 - Como funciona e recursos

Utilize Grid:

• uma coluna no celular;
• três colunas em telas maiores;
• espaçamento uniforme;
• cartões com altura consistente.

Passo 6 - Formulário

Estilize:

• rótulos;
• ajuda;
• inputs;
• select;
• checkbox;
• botão;
• foco;
• campos inválidos.

Passo 7 - Rodapé

Organize contato e navegação sem reduzir demais o texto.

17. Testes de responsividade

Teste pelo menos:

Verifique:

• existe rolagem horizontal indesejada?
• textos estão cortados?
• botões permanecem utilizáveis?
• o formulário cabe na tela?
• a navegação quebra de forma compreensível?
• a ordem visual acompanha a ordem do documento?

Não escolha tamanhos com base em aparelhos específicos. Crie breakpoints quando o conteúdo precisar de outra organização.

18. Exercício de fixação

Crie uma variação visual utilizando apenas os tokens de :root.

Altere:

• cor primária;
• cor de destaque;
• fundo do hero;
• raio dos cartões;
• intensidade da sombra.

Nenhuma regra de componente deve ser alterada.

19. Desafio individual

Adicione uma seção de depoimento contendo:

• citação;
• nome;
• função;
• empresa fictícia;
• imagem decorativa ou avatar com texto alternativo adequado.

Critérios:

• deve funcionar entre 320 e 1440 pixels;
• a citação deve utilizar blockquote;
• não pode causar rolagem horizontal;
• precisa manter contraste adequado;
• deve respeitar o sistema de espaçamento existente.

20. Erros comuns

Utilizar largura fixa

/* Pode ultrapassar telas pequenas */
.card {
  width: 600px;
}

Prefira limites flexíveis:

.card {
  width: 100%;
  max-width: 37.5rem;
}

Criar media queries para cada aparelho

Breakpoints devem responder ao conteúdo, não a uma lista de modelos de telefone.

Abusar de position: absolute

Elementos absolutos deixam o fluxo normal e podem sobrepor conteúdos.

Usar !important para corrigir conflitos

Primeiro revise cascata, especificidade e organização dos seletores.

Definir alturas fixas para conteúdo textual

Textos podem aumentar devido a tradução, zoom ou preferências do usuário.

Ocultar conteúdo essencial no celular

Responsividade reorganiza conteúdo; não deve eliminar informação necessária.

Remover foco

Nunca remova outline sem fornecer uma alternativa clara.

21. Lista de verificação de entrega

• O CSS está em arquivo externo.
• box-sizing: border-box foi aplicado.
• Cores e medidas recorrentes utilizam variáveis.
• A página possui largura de leitura controlada.
• O cabeçalho utiliza Flexbox.
• Os cartões utilizam Grid.
• Imagens são responsivas.
• O título utiliza tamanho fluido.
• O foco é visível.
• Hover não é o único estado disponível.
• O formulário pode ser utilizado em 320 px.
• Não existe rolagem horizontal.
• A interface respeita redução de movimento.
• O HTML continua semanticamente correto.

22. Critérios de aceite

A entrega será aceita quando:

1. funcionar entre 320 e 1440 pixels;
2. não apresentar rolagem horizontal;
3. possuir hierarquia visual clara;
4. manter o foco visível;
5. utilizar Flexbox e Grid adequadamente;
6. não depender de !important, exceto no ajuste de redução de movimento;
7. utilizar um sistema de propriedades personalizadas;
8. manter formulário e navegação acessíveis;
9. não apresentar erros de carregamento ou console;
10. o aluno explicar pelo menos uma decisão de breakpoint.

23. Perguntas para revisão

1. O que a cascata resolve?
2. Quais propriedades normalmente são herdadas?
3. Como border-box modifica o cálculo de largura?
4. Quando Flexbox é mais adequado?
5. Quando Grid é mais adequado?
6. O que significa mobile first?
7. Por que não devemos definir breakpoints por aparelho?
8. Para que serve clamp?
9. Por que o foco precisa permanecer visível?
10. O que prefers-reduced-motion representa?

Próxima aula

Na Aula 1.4, JavaScript será utilizado para controlar o formulário, validar dados, apresentar retorno e atualizar a interface sem recarregar a página.