O que o CSS faz: conectando estilo ao HTML

Toda página que você construiu até agora está sem estilo

Abra qualquer aula desta série num navegador e você vai notar uma coisa: parece simples. Texto preto, links azuis, uma fonte serifada padrão, controles de form no estilo que o sistema operacional trouxer. Isso vem da folha de estilo embutida do navegador, que ele aplica a toda página que não diz o contrário. Todo curso até agora ensinou estrutura e significado: qual elemento é um título, qual input coleta um email, qual fieldset agrupa uma pergunta. Nada ensinou ao navegador como qualquer coisa deveria parecer. Isso é uma linguagem completamente diferente, e começa aqui.

CSS em uma frase

CSS, Cascading Style Sheets, responde um tipo de pergunta: dado um elemento que já existe no HTML, como ele deveria ser desenhado? Cor, tamanho, espaçamento, posição, fonte, tudo isso. CSS nunca cria elementos, nunca decide que dado um form envia, nunca muda o que um leitor de tela anuncia como nome. Ele só pinta. Essa fronteira importa o bastante para repetir: HTML é o que uma coisa é; CSS é a aparência dessa coisa. Confundir os dois é um erro comum no começo. Você recorre a um truque de CSS para um problema que é um <label> faltando ou o elemento errado.

Levando CSS até a página

Uma regra precisa chegar até um documento HTML antes de fazer qualquer coisa, e existem três formas de entrada, embora só uma importe em projetos reais.

<!-- Inline: uma propriedade, num elemento, escrita direto na tag. Evite isso. -->
<p style="color: red;">Cuidado com esta.</p>

<!-- Embutido: uma folha de estilo inteira no <head> da própria página. Bom para aprender. -->
<head>
  <style>
    p { color: red; }
  </style>
</head>

<!-- Externo: um arquivo .css separado, ligado por link. O que apps de verdade usam. -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Estilos inline se aplicam a um elemento e não podem ser reaproveitados. Eles aparecem de vez em quando, geralmente gerados por JavaScript, mas quase nunca devem ser escritos à mão. Blocos <style> embutidos são úteis para uma demonstração rápida ou um exemplo de página única, este curso vai usar eles por esse motivo. Folhas de estilo externas são o que apps de produção usam: um arquivo .css ligado a toda página que precisa dele. Escreva a regra uma vez e toda página que liga o arquivo a recebe. Mude uma vez e toda página se atualiza. Num app Rails, esse arquivo mora em app/assets/stylesheets e é servido automaticamente; você vai configurar isso direito assim que chegar na fase de Rails.

Anatomia de uma regra

Toda regra CSS tem duas partes. Um seletor diz quais elementos alvejar, e um bloco de declarações diz o que fazer com eles.

p {
  color: navy;
  font-size: 18px;
}

p                    ← seletor: "todo elemento <p>"
{                    ← abre o bloco de declaração
  color: navy;       ← declaração: propriedade "color", valor "navy"
  font-size: 18px;   ← outra declaração
}                    ← fecha o bloco de declaração

p é o seletor, o assunto inteiro deste curso. Dentro das chaves, cada linha é uma declaração: um nome de propriedade, dois pontos, um valor e um ponto e vírgula fechando ela. O ponto e vírgula depois da última declaração é opcional. Esqueça um no meio e a declaração seguinte é engolida por este valor, então o navegador descarta as duas em silêncio. Termine toda declaração com ponto e vírgula e esse bug nunca acontece.

Para que servem os seletores

Um seletor é um padrão, escrito na pequena linguagem própria do CSS, que o navegador compara contra todo elemento no seu HTML. p combina com todo <p> da página. No resto deste curso, você vai ver seletores que alvejam um elemento específico ou uma categoria inteira. Outros pegam elementos num estado, ou numa relação estrutural com outro elemento, e tudo isso se combina. Ler e escrever seletores com precisão é a habilidade que este curso constrói. As declarações dentro das chaves (cores, tamanhos, espaçamento) vêm depois, quando você souber dizer com certeza com qual elemento está falando.

O que este curso cobre

• Aula 1, O que o CSS faz: conectando estilo à estrutura sem tocar em nenhum dos dois (você está aqui)
• Aula 2, Seletores de tipo, classe e ID: os três seletores por trás de quase tudo que você vai escrever
• Aula 3, Agrupamento e combinadores: alvejando vários seletores de uma vez, e alvejando por relação estrutural
• Aula 4, Seletores de atributo: combinando um elemento pelo que seus atributos HTML dizem
• Aula 5, Pseudo-classes: alvejando um estado, como estar sob o mouse, focado ou marcado
• Aula 6, Pseudo-elementos: alvejando uma parte de um elemento que não tem sua própria tag HTML
• Aula 7, Juntando tudo: estilizando o form de cadastro acessível do curso passado, seletor por seletor

No final, você vai conseguir olhar para qualquer parte de uma página e escrever o seletor exato que a alcança, nem mais, nem menos.