Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 19

Ligar o CSS

6 min de leitura 1.081 palavras 2 gravuras

Este capítulo liga a aparência ao HTML da Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. O visual vive num arquivo seu, não dentro de um framework editado.

O exemplo está em exemplos/19-ligar-o-css/. Este volume tem 52 capítulos.

CSS descreve aparência. HTML descreve papel. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

CSS é texto. A extensão é .css. Neste volume o arquivo se chama main.css e mora em assets/stylesheets/.

No head de cada HTML, depois do título:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início · Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design em João Pessoa.</p>
  </body>
</html>

rel="stylesheet" diz que o recurso é folha de estilo. href é o caminho a partir do HTML. Se o index.html está na raiz do exemplo, o caminho desce para assets/stylesheets/main.css.

Um link quebrado não estoura erro vermelho na página. A página só nasce nua, com o CSS do navegador. Abra as ferramentas, aba Rede, e procure o main.css. Status 404 significa caminho errado.

Não cole regras longas num style no head neste volume. Um arquivo só, compartilhado por todas as páginas, evita cópia.

Não edite simple.css nem outro framework. Se um dia você redistribuir CSS de terceiros, personalize em arquivo próprio. Aqui o próprio já é o main.css.

Anatomia da regra

Uma regra escolhe elementos e declara o que muda.

h1 {
  color: #0b4f6c;
  font-size: 2rem;
}

O seletor é h1. Cada linha dentro das chaves é uma declaração: propriedade, dois-pontos, valor, ponto e vírgula. Sem o ponto e vírgula, a declaração seguinte pode falhar.

Comentário CSS usa /* */. Use para marcar seções, não para desligar metade do arquivo para sempre.

/* ------------- =Marca -------------- */

.brand {
  font-weight: 700;
  text-decoration: none;
}

A indentação das propriedades é para você. O navegador ignora espaços extras. Dois espaços neste volume. Não misture tab e espaço no mesmo arquivo.

Vários seletores na mesma regra ganham linha própria:

h1,
h2,
h3 {
  color: #14222b;
}

Resumo dos conceitos: seletor, propriedade, valor

Cascata: quem ganha

Cascata é o modo de resolver conflito. Três ideias bastam agora.

Origem: existem estilos do navegador, da pessoa visitante e do autor da página. Nas declarações normais, o estilo do autor tem prioridade sobre o da pessoa e o do navegador. Declarações importantes mudam essa prioridade e podem proteger preferências de acessibilidade da pessoa. Aqui, vamos comparar regras normais do mesmo main.css. Não lute contra o zoom da pessoa.

Especificidade: p vale menos que .card p, que vale menos que #aviso. ID é forte demais para visual. Prefira classe.

Ordem: se dois seletores empatam, o que vem por último no arquivo ganha.

p {
  color: #14222b;
}
.hero p {
  color: #0b4f6c;
}

O parágrafo do hero fica azul da marca. O restante fica tinta. A ordem no HTML não muda isso. Muda o seletor.

!important fura a cascata. Não use neste volume, salvo o caso de prefers-reduced-motion que você já viu. Atalho demais esconde o erro.

Folhas ligadas depois no head também entram na ordem. Por isso o main.css é o único link de estilo do exemplo.

Seletores que você vai usar

Tipo: o nome da tag. p { } pega todos os parágrafos.

Classe: ponto + nome. No HTML, class="card". No CSS, .card. Um elemento pode ter várias classes, separadas por espaço.

<article class="card destaque">
  <h2>Cartaz da Feira de Tambaú</h2>
  <p>Projeto fictício da Oficina Costeira.</p>
</article>
.card {
  background: #fff;
  padding: 1rem;
  border: 1px solid #d9d3c7;
}

Descendente: espaço. header p pega qualquer p dentro de header, mesmo lá no fundo.

Filho direto: >. header > p pega só o p filho imediato.

Adjacente: +. h1 + p pega o primeiro parágrafo depois do h1.

Grupo: vírgula. h1, h2 aplica a mesma declaração nos dois.

Posição: :first-child, :last-child, :nth-child(odd). Útil em listas, não para “achar o terceiro cartaz para sempre”. Classe nomeada é mais estável.

.menu li:first-child a {
  font-weight: 700;
}

ID (#conteudo) serve de alvo do skip-link. Evite estilizar por ID. A especificidade atrapalha depois.

Cores e unidades

Cor por nome (red) existe. Hex (#0b4f6c) é o padrão deste site. RGB e HSL aceitam transparência.

.site-footer {
  background: #fff;
  color: #14222b;
  border-top: 1px solid rgb(217 211 199);
}
.sombra {
  background: rgb(11 79 108 / 0.08);
}

Unidades:

Para texto, prefira rem. Para coluna fluida, % ou min(). Para um ícone que não pode crescer, px até pode. A tipografia da próximo capítulo aprofunda rem e medida.

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

100% no html respeita o tamanho que a pessoa configurou no navegador. Travar font-size: 14px no body briga com isso.

Ordem no arquivo e pasta certa

Agrupe o main.css em blocos: reset curto, tokens da marca, cabeçalho, tipografia, componentes. Indentação de filhos no CSS (regras de .menu a logo depois de .menu) ajuda a enxergar o HTML.

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

.menu {
  display: flex;
  gap: 0.75rem 1.25rem;
}

  .menu a {
    color: #fff;
  }

A indentação da segunda regra é opcional. Se usar, seja consistente.

Caminho de fundo no CSS é relativo ao arquivo CSS, não ao HTML.

.hero {
  background-image: url("../imagens/orla.jpg");
}

De assets/stylesheets/main.css, ../imagens/ sobe para assets/ e entra em imagens/. Errar essa subida é o 404 silencioso da folha.

Pare e experimente. No index.html, mude só o href do link para assets/css/main.css. Preveja: a página perde a marca azul. Recarregue e confira na aba Rede. Devolva assets/stylesheets/main.css.

Erro comum: editar o CSS pelo painel do DevTools e achar que salvou. A mudança some no recarregar. Copie a declaração para o main.css e então recarregue.

Resumo dos conceitos: valor, propriedade, seletor

Não misture PHP. Não gere CSS no servidor. O arquivo está no disco, a página no navegador, o teste em 127.0.0.1.

Atividades

  1. Qual atributo do link declara que o arquivo é CSS?
  2. Se .hero p e p definem color, quem ganha e por quê?
  3. Por que o volume evita estilizar #conteudo?
  4. O url() de um background-image é relativo a qual arquivo?
  5. O que acontece se você alterar simple.css de um framework em outro projeto deste workspace?

Respostas comentadas

  1. rel="stylesheet". O href só aponta o caminho.
  2. .hero p ganha: é mais específico (classe + tipo) do que o tipo sozinho.
  3. ID pesa na especificidade e o id já serve ao skip-link. Classe descreve o visual.
  4. Relativo ao CSS (main.css), não ao HTML.
  5. Você perde atualização e mistura código de terceiros com o seu. Personalize em arquivo próprio. Neste volume, o próprio é main.css.

Referências

O arquivo completo

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

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}