CSS entra na página

Este capítulo liga a primeira folha de estilos da Oficina. HTML continua descrevendo o papel. CSS descreve a aparência: cor, tamanho e espaço. O exemplo está em exemplos/04-css/. Abra index.html e o arquivo styles.css ao lado.

Uma regra CSS escolhe elementos e declara o que muda. Neste volume, 99% do CSS fica num arquivo externo. Não cole um bloco enorme no meio do HTML.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Criar styles.css e ligá-lo no head.
• Ler seletor, propriedade e valor.
• Usar seletor de tipo, classe, id, descendente e agrupamento.
• Preferir CSS externo a estilo no atributo style.
• Achar o erro quando a página não muda.

O arquivo e o link

Crie styles.css na mesma pasta do index.html. No head, depois do title:

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

rel="stylesheet" diz que o arquivo é uma folha de estilos. href é o caminho, igual ao de uma imagem: relativo ao HTML.

O navegador baixa o CSS e aplica as regras ao body. Se o caminho estiver errado, a página continua com a aparência padrão. O HTML não some.

Neste volume o arquivo se chama styles.css. Não edite um CSS de terceiros. Escreva as suas regras neste arquivo.

Erro comum: colocar o link no meio de um parágrafo. O head descreve a página para o navegador. O body é o conteúdo visível.

Pare e experimente. Em exemplos/04-css/index.html, mude href="styles.css" para href="estilo.css". Recarregue. A página deve voltar ao visual cru. Restaure o nome certo.

Anatomia de uma regra

p {
  color: #1c1917;
  font-size: 1.1rem;
}

O seletor p escolhe todos os parágrafos. Cada declaração junta uma propriedade e um valor, separados por dois-pontos. O ponto e vírgula termina a declaração. As chaves envolvem o bloco.

Se o ponto e vírgula faltar, a declaração seguinte pode ser ignorada. Mude uma propriedade por vez até o olho acostumar.

Cinco seletores do dia a dia

.destaque {
  color: #1b365d;
}
#conteudo {
  padding: 1rem;
}
.principal a {
  color: #f4ead8;
}
h1, h2, h3 {
  font-family: "Segoe UI", Tahoma, sans-serif;
}

A classe começa com ponto no CSS e não leva ponto no HTML: class="destaque". O id começa com # no CSS e não leva # no atributo: id="conteudo".

Um id deve ser único na página. Prefira classe para estilo. O id #conteudo neste volume existe sobretudo para o skip-link.

O espaço no seletor descendente importa. header p não é o mesmo que headerp.

Quase todo CSS fica fora do HTML

Três jeitos existem. Este volume usa o externo.

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

O interno seria um <style> no head. O inline seria style="color: red" na tag. Os dois misturam aparência com conteúdo e atrasam a manutenção.

Uma linha inline pode servir num teste de dois minutos. Apague depois. A regra de verdade mora em styles.css.

O exemplo desta etapa já traz um reset curto no topo do CSS: margens zeradas e uma fonte no body. Suas regras vêm depois do reset. O capítulo 5 explica cor e foco. O capítulo 6 explica box-sizing.

Pare e experimente. Em styles.css, mude só a cor de .destaque. Salve e recarregue. Só o trecho com essa classe deve mudar. Se a página inteira mudar, o seletor ficou amplo demais — talvez um p sozinho.

Quando nada muda

Confira nesta ordem: salvou o CSS? o href aponta para o arquivo certo? o seletor existe no HTML? a propriedade está escrita sem erro?

O navegador pode guardar uma cópia antiga. Recarregue com Ctrl+F5. Confira o caminho na barra: você precisa estar na pasta 04-css, não numa cópia velha do capítulo 3.

Atividades

1. Por que o link do CSS fica no head e não no footer?
2. Qual a diferença entre .destaque no CSS e class="destaque" no HTML?
3. O que um seletor descendente .principal a não escolhe?
4. No exemplo 04-css, o que acontece se styles.css for renomeado e o href não mudar?

Respostas comentadas

1. O head descreve a página. Ligar o CSS ali aplica o estilo a tudo que vier no body. No footer o navegador já começou a desenhar sem a folha.
2. O ponto marca “isto é uma classe” na regra. No HTML o atributo class lista o nome, sem ponto.
3. Não escolhe um a que esteja fora de .principal. Um link no main fica de fora.
4. A página abre, o texto permanece, a aparência volta ao padrão do navegador. O HTML não depende do CSS para existir.

Referências

• O que é CSS?
• Começando com CSS
• Seletores

O arquivo completo

Referência do exemplo 04-css, reproduzida aqui para que você possa conferir sem sair da página.

styles.css

*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body, h1, h2, h3, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1c1917;
}
.pular {
  position: absolute;
  left: -999px;
}
.pular:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: 0.4rem 0.8rem;
  outline: 3px solid #c45c26;
}
.destaque {
  color: #1b365d;
}
#conteudo {
  padding: 1rem;
}