Regras CSS

Este capítulo começa o visual da Casa da Restinga, cafeteria fictícia em Natal. HTML continua descrevendo o papel. CSS descreve a aparência. Este volume tem 23 capítulos. O exemplo está em exemplos/07-regras-css/. Abra index.html e styles.css lado a lado.

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

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

• Ligar styles.css no head.
• Ler seletor, propriedade, valor e ponto e vírgula.
• Juntar várias declarações na mesma regra.
• Ver a cor herdar do pai para o filho.
• Achar o erro quando a página não muda.

CSS é lista de regras

CSS não é programa. É uma lista que o navegador aplica. Você escreve: “todo h1 desta página fica nesta cor”. O navegador procura os h1 e pinta.

Sem CSS, o blog do capítulo 6 continua legível. Com CSS, a casa ganha cor, tamanho e espaço. Os dois arquivos no disco trabalham juntos. A página na janela é o resultado.

JavaScript ainda não entra. Não precisa de internet para estilizar um arquivo local. Dois cliques (file://) ou 127.0.0.1 bastam. Nenhum dos dois publica.

Leia. Copie. Mude uma coisa. Preveja. Recarregue. Confira.

O HTML do capítulo 6 não muda de papel quando o CSS entra. O h1 continua h1. Só a cor e o tamanho podem mudar. Se o visual não aplicar, o conteúdo ainda está no disco.

Anatomia de uma regra

h1 {
  color: maroon;
}

h1 é o seletor. Tudo que combina com ele recebe o bloco. color é a propriedade. maroon é o valor. O ponto e vírgula encerra a declaração. As chaves envolvem o bloco.

color pinta o texto. Há cores com nome (maroon, navy), hexadecimal (#7a1f1f) e outras notações. Neste volume, nome e hex simples bastam.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Casa da Restinga</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Casa da Restinga</h1>
    <p>Cafeteria fictícia em Natal.</p>
  </body>
</html>

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

Erro comum: colocar o link no body ou escrever href="estilo.css" com outro nome. A página abre. O visual não muda.

Se o ponto e vírgula faltar, a declaração seguinte pode ser ignorada. Mude uma propriedade por vez até o olho acostumar. O ciclo do volume vale igual no CSS: uma mudança, uma previsão, um recarregar.

Maiúsculas no valor de cor com nome costumam funcionar (Maroon). Neste volume escrevemos minúsculas. Hexadecimal começa com # e usa seis dígitos neste volume.

Várias propriedades no mesmo bloco

Um seletor aceita várias declarações. Uma propriedade pode juntar mais de um valor, como em border.

h1 {
  color: seagreen;
  font-size: 2rem;
  font-weight: normal;
  text-decoration: underline;
  text-transform: uppercase;
  border: 3px solid pink;
}

font-size é o tamanho. rem acompanha a fonte raiz. font-weight: normal tira o negrito padrão do h1. text-decoration: underline sublinha. text-transform: uppercase mostra maiúsculas sem reescrever o HTML.

border: 3px solid pink junta espessura, estilo e cor. A ordem desses três pedaços pode variar. Sem um deles, a borda pode sumir.

h1 ocupa a linha inteira mesmo com pouco texto. A borda vai até a margem da página. Isso é o modelo de bloco. Layout entra em capítulos seguintes.

Pare e experimente. Comente só text-transform. Recarregue. O título deve voltar a mostrar maiúsculas e minúsculas do HTML. Recoloque a declaração.

O filho herda a cor do pai

Se o pai tem color e o filho não declara cor, o texto do filho usa a cor do pai.

<div>
  <h1>Cardápio da manhã</h1>
</div>

div {
  color: navy;
}

O h1 fica navy. A herança atravessa vários níveis. Um color no body pinta quase todo o texto, até um h1 lá no fundo.

Nem toda propriedade herda. border e padding em geral não passam para o filho. color e font-family passam. Quando o filho declara a mesma propriedade, o valor do filho vence neste ponto. O capítulo 8 explica o desempate completo.

Pare e experimente. Pinte o body de teal. Recarregue. Título e parágrafo devem acompanhar. Depois pinte só o h1 de maroon. O parágrafo permanece teal.

O arquivo externo

Neste volume o CSS mora em styles.css, na mesma pasta do HTML. O link fica no head, depois do title.

Três jeitos existem. Externo é o deste volume. Interno seria <style> no head. Inline seria style="color: red" na tag. Os dois últimos misturam aparência com conteúdo. Use só para um teste de dois minutos. Apague depois.

Se nada mudar, confira nesta ordem: salvou o CSS? o href aponta para o nome certo? o seletor existe no HTML? a propriedade está escrita sem erro? Recarregue com Ctrl+F5. A barra deve mostrar a pasta 07-regras-css, não uma cópia velha.

O arquivo CSS está no disco. O navegador lê os dois arquivos e monta a página. 127.0.0.1 entrega os dois nesta máquina. Publicar os dois juntos viria depois.

Experimentar na Casa

No blog da Restinga, comece pequeno. Não pinte tudo de uma vez.

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #1c1917;
  background: #fffaf3;
}

h1 {
  color: #7a1f1f;
}

.post {
  border: 1px solid #d6cbb8;
  padding: 1rem;
  margin-bottom: 1rem;
}

O seletor .post só pega quem tem class="post". Sem essa classe no HTML, a regra não pega ninguém. Classe você já marcou no capítulo 4.

O ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Mude só a cor do h1. O fundo do body deve permanecer.

Não edite um CSS de terceiros. Escreva as suas regras em styles.css. Simple.css, se aparecer noutro curso, não se altera. Aqui o arquivo é seu.

Quando a ligação HTML+CSS estiver estável, avance. O capítulo 8 ensina a pintar um parágrafo de um jeito e outro de outro, com classes e cascata.

Se o título ficou verde-limão enorme só no teste, restaure um visual calmo antes de seguir. A Casa da Restinga pede marrom, creme e uma borda discreta nos posts. Experimentar vale. Entregar o exemplo ilegível não ajuda a próximo capítulo.

O arquivo styles.css no disco é texto. O navegador aplica as regras na página. 127.0.0.1 entrega HTML e CSS juntos nesta máquina. Publicar os dois, no mesmo caminho relativo, viria depois.

Pare e experimente. No link, troque href="styles.css" por href="nao-existe.css". Recarregue. A página deve voltar ao visual cru. Restaure o nome certo. Isso confirma: HTML no disco permanece; o CSS é outro arquivo.

Não publique esta folha. Não aponte o href para um CSS na internet como único estilo da Casa. O aluno precisa do arquivo local para mudar uma regra e conferir.

Atividades

1. Quais são as quatro peças de uma declaração CSS dentro da regra?
2. Por que a cor no div pode mudar o texto do h1 filho?
3. O que acontece se styles.css for renomeado e o href não mudar?
4. No exemplo 07-regras-css, onde o arquivo CSS é ligado e com qual rel?

Respostas comentadas

1. Propriedade, dois-pontos, valor e ponto e vírgula. O seletor e as chaves envolvem esse conjunto.
2. color herda. O filho usa a cor do ancestral enquanto não declara a sua.
3. A página abre, o HTML permanece, a aparência volta ao padrão do navegador.
4. No head, com <link rel="stylesheet" href="styles.css">.

Referências

• O que é CSS?
• Começando com CSS
• Sintaxe CSS
• color
• font-size

O arquivo completo

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

assets/stylesheets/main.css

*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1a2a2c;
  background: #f7f3ea;
}
a { color: #0d5c63; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 2; }
.wrap { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
header { background: #0d5c63; color: #fff; padding: 1rem 0; }
header a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 0.5rem; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
main { padding: 1.5rem 0 3rem; }
footer { border-top: 1px solid #ddd4c4; padding: 1rem 0; font-size: 0.95rem; }
article { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd4c4; }