Fundamentos de CSS

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira já tem páginas. Agora a aparência sai do palpite do navegador e entra numa folha de estilo. Você escreve regras com seletor, propriedade e valor. Iara Campos e Nuno Freire continuam só no acervo fictício.

O exemplo deste capítulo é 08-fundamentos-css, no pacote que acompanha o volume. Leia estilos.css, mude uma cor ou um seletor, preveja, recarregue e confira. O HTML da pasta já está pronto; o experimento desta aula é o CSS.

O CSS é um arquivo no disco. O navegador aplica as regras na página. 127.0.0.1 entrega HTML e CSS juntos por HTTP local. Publicar os dois arquivos em pastas diferentes, sem acertar o link, quebra o visual no ar também.

O que você vai aprender

• Explicar o que é CSS.
• Ler uma regra: seletor, propriedade, valor.
• Usar seletores de tipo, classe, atributo e combinators.
• Reconhecer pseudo-classe e pseudo-elemento.
• Ligar estilos.css na ordem certa.

O que é CSS

CSS descreve aparência. HTML descreve papel. Uma regra escolhe elementos e declara o que muda.

Não edite um arquivo de framework, se no futuro você usar um. Neste projeto a folha da biblioteca é estilos.css.

Uma folha externa deixa o HTML da Ribeira estável enquanto você experimenta cor e tipo. O ciclo continua o mesmo: uma alteração, uma previsão, um recarregar.

Anatomia da regra

O seletor aponta. As chaves guardam declarações. Cada declaração é propriedade, dois-pontos, valor e ponto e vírgula.

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #1a1a1a;
  background: #f4f1ea;
  line-height: 1.5;
}

Mude só background para #fff8e7. Salve. Recarregue. O papel da página deve clarear.

Seletores e combinators

Seletor de tipo: p. Seletor de classe: .brand. Seletor de atributo: a[aria-current="page"].

Combinators juntam: nav a (descendente), header > p (filho direto), h1 + p (irmão seguinte), h1 ~ p (irmãos seguintes).

Pseudo-classe: a:focus-visible, a:hover. Pseudo-elemento: ::after (usado depois no skip visual, se precisar).

O foco visível neste volume é cerca de 3 px:

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #e07a5f;
  outline-offset: 2px;
}

Ligar a folha

No head:

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

O caminho é relativo ao HTML. Várias folhas se acumulam na ordem do link. A de baixo no arquivo ganha nas empates de especificidade — isso aprofunda no capítulo 09.

Erro comum: CSS na ordem errada

Erro comum: colocar um style no HTML depois de regras que você quer que valham, ou ligar duas folhas e não lembrar qual veio por último. Você muda estilos.css e “nada acontece”, porque outra regra mais específica ou mais tardia cobre.

Outro erro: editar o HTML e esquecer o link. A página no disco abre nua. Em 127.0.0.1 o mesmo.

Disco, local e publicação

Abra pelo Explorador: o CSS só entra se o caminho relativo estiver certo. Sirva curso em 127.0.0.1:8765 e visite o exemplo 08. Publicar exige enviar estilos.css junto. HTML sozinho no servidor público não leva as cores da Ribeira.

Atividades

1. Na regra nav a { color: #fff; }, o que é seletor e o que é propriedade?
2. Por que a:focus-visible importa no menu da biblioteca?
3. Se href="css/estilos.css" e o arquivo está ao lado do HTML, o que falha: o disco, o HTTP local, ou os dois?

Respostas comentadas

1. Seletor: nav a. Propriedade: color. Valor: #fff.
2. Mostra onde está o teclado. Sem foco visível, quem não usa rato perde o menu. O contorno de cerca de 3 px é o combinado deste volume.
3. Os dois. O navegador pede um arquivo numa pasta css/ que não existe neste exemplo. Disco e 127.0.0.1 falham do mesmo jeito; publicar também.