O que o CSS faz

Um único arquivo CSS pode mudar o estilo de todas as páginas de um site de uma vez. Esse foi o principal argumento a favor do CSS quando o W3C publicou o CSS nível 1, em dezembro de 1996.

Estrutura no HTML, aparência no CSS

O HTML diz o que é cada parte da página: um título, uma lista, um formulário. O CSS, sigla de Cascading Style Sheets (folhas de estilo em cascata), diz como essas partes devem parecer: cores, fontes, tamanhos, espaçamento e posição na tela. Manter as duas coisas separadas traz vantagens práticas. Você muda a aparência de um site inteiro editando uma só folha de estilo, o mesmo HTML pode ter outra cara no celular, num monitor grande e no papel, e o leitor pode aplicar estilos próprios, como letras maiores, sem quebrar a página.

Håkon Wium Lie começou a trabalhar no CSS no CERN em outubro de 1994, Bert Bos entrou no trabalho em 1995, e o W3C publicou o CSS nível 1 como Recomendação em 17 de dezembro de 1996. O CSS 2 veio em maio de 1998. Desde então o CSS foi dividido em módulos, como Color, Selectors, Flexbox e Grid, cada um desenvolvido no seu ritmo pelo CSS Working Group do W3C. Não existe um CSS4 único; o grupo publica um retrato que lista quais módulos estão estáveis.

A forma de uma regra

Uma folha de estilo é uma lista de regras. Cada regra começa com um seletor, que diz a quais elementos ela se aplica, seguido de um bloco de declarações entre chaves. Dentro do bloco, cada declaração é uma propriedade, dois-pontos, um valor e um ponto e vírgula. Na regra acima, h1 seleciona todo título de nível um, e as duas declarações deixam esses títulos azuis e com 32 pixels de altura. Espaços e quebras de linha dentro de uma regra não importam, por isso a maioria das pessoas põe cada declaração numa linha para facilitar a leitura.

Quando o navegador encontra uma declaração que não entende, como uma propriedade escrita errado ou um valor sem sentido, ele pula só aquela declaração e segue para a próxima. Isso é proposital: permite acrescentar recursos novos ao CSS sem quebrar navegadores antigos. O outro lado é que um único ponto e vírgula esquecido pode engolir em silêncio a declaração seguinte, porque as duas se juntam numa declaração inválida. Se um estilo não se aplica, confira a pontuação primeiro. Comentários se escrevem /* assim */.

Três jeitos de pôr CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Uma folha de estilo externa, ligada no <head> com <link rel="stylesheet">, é a escolha comum num site de verdade: todas as páginas a compartilham, e o navegador a baixa uma vez e a guarda no cache. Um elemento <style> guarda regras de uma página, e é isso que os exercícios deste curso usam. O atributo style aplica declarações a um único elemento; é prático para um teste rápido, mas difícil de manter, porque a mesma aparência precisa ser repetida em cada elemento.

O navegador já tem estilos

Mesmo uma página sem CSS tem algum estilo: títulos grandes e em negrito, links azuis e sublinhados, listas com recuo. Isso vem da folha de estilo padrão do navegador, chamada folha de estilo do agente do usuário (user agent stylesheet). Suas regras são aplicadas por cima dela. É por isso que a página da padaria do curso de HTML já era legível antes de ter CSS, e é por isso que uma boa folha de estilo muda só o necessário.