Sua primeira regra de CSS

Neste capítulo você vai ligar uma folha de estilos e mudar uma propriedade.

Seu ponto de partida

Estude depois do capítulo 03. O exemplo deste capítulo é 04-primeira-regra-css, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

O HTML liga o arquivo de estilo

CSS define aparência. Ele fica num arquivo separado para as páginas compartilharem regras. Link, dentro de head, conecta o HTML à folha. Rel=“stylesheet” informa a finalidade. Href aponta para o arquivo.

Não há framework nesta prática. Main.css é seu próprio arquivo. A base já inclui foco e um atalho acessível; agora acrescentamos as primeiras escolhas visuais do evento.

Faça no seu exemplo

Confira em head, nas duas páginas.

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

Mude uma coisa e preveja

Troque somente main.css por teste.css numa página.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Essa página perde as regras; a outra continua com estilo. Restaure main.css.

Se não acontecer

Se as duas mudarem, confira se editou o arquivo CSS compartilhado em vez do link de uma página.

Uma regra escolhe e declara

O seletor identifica os elementos que receberão a regra. As chaves guardam declarações. Cada declaração tem propriedade, dois-pontos, valor e ponto e vírgula. Color muda a cor do texto; background muda o fundo.

Comece com um seletor e uma declaração. Alterar várias propriedades dificulta reconhecer qual mudança produziu o resultado.

Faça no seu exemplo

Em main.css, confira a regra de h1.

h1 {
  color: #174d69;
}

Mude uma coisa e preveja

Troque somente a cor por #703c16.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Os títulos h1 das duas páginas mudam para marrom escuro.

Se não acontecer

Se nada mudar, confira o seletor e as chaves. Uma regra com sintaxe incompleta pode ser ignorada.

Salve e confira o mesmo percurso

O CSS compartilhado facilita consistência, mas seu efeito depende de o HTML apontar para o mesmo arquivo. Abra as duas páginas após uma mudança. Recarregar pede ao navegador que atualize a apresentação.

Se uma versão antiga persistir, confira primeiro o caminho e a cópia aberta. Só depois tente uma recarga que ignore o cache. Cache é uma cópia temporária de recursos guardada pelo navegador.

Faça no seu exemplo

Confira a regra do fundo.

body { background: #eef4f7; color: #203246; }

Mude uma coisa e preveja

Troque somente o fundo por #fff6ed.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

As duas páginas ficam com fundo claro quente e texto ainda legível. Restaure a referência.

Se não acontecer

Não troque texto por uma cor clara no fundo claro. Aparência precisa preservar leitura.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Mude h1 e preserve h2.

2. Faça uma página perder o CSS e depois restaure.

3. Explique propriedade e valor.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. O seletor h1 limita a regra aos títulos desse tipo.

2. Um href errado rompe a ligação; restaurá-lo recupera o estilo.

3. Color é propriedade; #174d69 é o valor escolhido.

Quando seguir

Você sabe onde está o CSS e altera uma regra compartilhada. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }