Primeiras regras CSS

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/06-primeiras-regras-css/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Ligar uma folha externa.
• Escrever e alterar a primeira regra.

Por que o CSS existe

Se a cor morasse em todo parágrafo HTML, mudar o verde da oficina viraria caça em dezenas de arquivos. CSS junta as decisões de aparência num lugar. O HTML fica legível. A folha pode servir várias páginas.

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

O caminho é relativo ao HTML. Se o CSS não carrega, o caminho está errado ou o nome do arquivo não corresponde ao caminho. Declare o link no head para organizar o documento.

Pare e experimente. Copie o link para estilos.css no head. Mude apenas o nome para ausente.css, preveja a perda de aparência, recarregue e confira. Restaure o nome.

Sintaxe

p {
  color: #2b2a29;
  line-height: 1.5;
}

Seletor escolhe. Cada declaração é propriedade: valor; com ponto e vírgula. Comentário: /* texto */.

Pare e experimente. Copie a regra ou a tag mostrada em uma cópia do arquivo. Mude só o texto do parágrafo, salve, preveja e recarregue. Confira no editor e na página.

Seletores

Classe é o instrumento do dia a dia. Id é único na página e pesa demais na prioridade. Não escreva style="..." no HTML deste volume, salvo nos demos do site.

Pare e experimente. Copie p { color: teal; } no final da folha. Mude apenas p para .marca. Preveja quais palavras mudarão, recarregue e confira a diferença entre tipo e classe. Retire a regra de teste.

Cor e tamanho

Cores: nome (teal), hexadecimal (#c0392b), rgb(), hsl(). O modelo HSL ajuda a pensar tom, saturação e claridade.

Tamanhos: px é absoluto na tela. em depende da fonte do elemento. rem depende da fonte do html. % depende do ancestral. vw/vh dependem da viewport — use com cuidado em texto.

Pare e experimente. Copie body { background: teal; } no final da folha. Mude somente teal para #f4f1ea. Preveja o fundo, recarregue e confira nas três páginas.

Reset curto

Cada navegador traz margens padrão diferentes. Um começo estável:

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

html {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
}

body {
  margin: 0;
  color: #2b2a29;
  background: #f4f1ea;
}

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

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

box-sizing: border-box faz width incluir padding e borda. Sem isso, “largura 200 mais padding 20” vira 240 e o layout estoura.

O exemplo correspondente é 06-primeiras-regras-css, no pacote que acompanha o volume. Mude a cor de fundo, recarregue e confira se Início, Sobre e Contato mudam juntos — as três páginas puxam o mesmo estilos.css.

Pare e experimente. Copie .card { width: 200px; padding: 20px; border: 2px solid; } na folha de teste. Preveja a largura com border-box, recarregue e confira no painel Modelo de caixa. Mude só box-sizing para content-box, preveja e confira novamente. Retire o teste.

Atividades

1. Onde ligar estilos.css?
2. O que escolhe o parágrafo?
3. Qual é a ordem de uma declaração?
4. Se as três páginas não mudam juntas?

Respostas comentadas

1. No head com link rel=“stylesheet”.
2. O seletor p.
3. Propriedade, dois-pontos, valor e ponto e vírgula.
4. Confira se todas ligam a mesma folha e se você salvou o arquivo.

O arquivo completo

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

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}

estilos.css

*,
*::before,
*::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: #2b2a29;
  background: #f4f1ea;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #1d90ff; outline-offset: 3px; }
.saltar {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  background: #111;
  color: #fff;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}
.saltar:focus { top: 0; }

a { color: #c0392b; }
.marca a { color: inherit; text-decoration: none; font-weight: 700; }

/* Apoio de leitura e conferencia */
img,input,select,textarea{max-width:100%;height:auto}p,td,th,a{overflow-wrap:anywhere}.card{min-width:0}fieldset{min-width:0}.botao{background:#a93226;color:white}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}table{max-width:100%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}