Sintaxe CSS

Você já sabe que o CSS dá estilo ao HTML. Nesta sessão vamos olhar de perto a gramática de uma regra, para que você leia e escreva estilos sem ficar na dúvida sobre onde entram as chaves, os dois-pontos e o ponto e vírgula.

O que é a sintaxe CSS?

A sintaxe CSS é o padrão fixo usado para escrever uma regra de estilo. Quase toda regra do dia a dia segue a mesma forma: você escolhe o que quer estilizar (o seletor), abre um bloco de declarações com {, escreve uma ou mais declarações e fecha com }. Cada declaração liga uma propriedade a um valor.

Anatomia de uma regra CSS

Divida a regra em partes com nome. Quando você consegue identificar cada peça, encontrar erros de digitação fica bem mais fácil.

Uma regra com as partes identificadas

Esta é uma regra mínima em que todas as peças importantes aparecem. Vamos aprofundar os seletores em sessões futuras; aqui o objetivo é acertar a estrutura.

Leia da esquerda para a direita

• p — seletor (todos os parágrafos)
• { … } — bloco de declarações
• color — propriedade
• : — separa a propriedade do valor
• teal — valor
• ; — encerra a declaração
  Espaços e quebras de linha são flexíveis. Você poderia escrever p{color:teal;} em uma linha só, e o navegador trataria da mesma forma. Mesmo assim, para aprender e para trabalhar em equipe, vale preferir a forma legível, em várias linhas.

Várias declarações em um mesmo bloco

Uma regra pode definir muitas propriedades para o mesmo seletor. Escreva cada declaração em sua própria linha e termine com ponto e vírgula.

Por que isso funciona

• .note é um seletor de classe (você vai praticar mais as classes adiante)
• Quatro declarações compartilham um único bloco de declarações
• O navegador aplica todas elas aos elementos com class="note"
• Se faltar o ponto e vírgula entre duas declarações, a propriedade seguinte pode não ser aplicada

Agrupando seletores

Quando vários seletores precisam dos mesmos estilos, separe-os com vírgulas. Um único bloco de declarações atende a todos.

Quando agrupar

Agrupar evita copiar e colar quando títulos (ou outros elementos) devem ter a mesma aparência. Se mais tarde um seletor precisar de um estilo só dele, crie uma regra separada em vez de sobrecarregar o grupo.

Tenha esta lista curta em mente enquanto escreve:

• As chaves envolvem o bloco de declarações
• Os dois-pontos ficam entre a propriedade e o valor
• O ponto e vírgula encerra cada declaração (é obrigatório antes da próxima; colocá-lo também na última é um bom hábito)
• As vírgulas separam seletores agrupados, e não propriedades
• Nomes de propriedades e a maioria dos valores com palavras-chave não diferenciam maiúsculas de minúsculas, mas por convenção se escrevem em minúsculas

Experimente você mesmo

1. Crie syntax.html com um parágrafo <p class="note">Syntax practice</p> e um bloco <style> no head.
2. Adicione a regra .note com várias declarações vista nesta sessão.
3. Mude background-color para #fef3c7, salve e atualize a página.
4. Acrescente uma quinta declaração, font-size: 1.125rem;, dentro do mesmo bloco, salve e atualize de novo.
5. Confirme que tanto o fundo quanto o tamanho da fonte mudaram. Se não mudaram, confira as chaves e os pontos e vírgulas.

Erros comuns

• Escrever color teal sem os dois-pontos — o navegador não consegue interpretar a declaração
• Esquecer { ou }, deixando declarações fora de um bloco, onde são ignoradas
• Omitir o ponto e vírgula entre duas declarações, de modo que a segunda propriedade não é aplicada
• Colocar uma vírgula entre a propriedade e o valor (color, teal) em vez de dois-pontos
• Deixar uma propriedade solta, sem seletor nem chaves — isso não é uma regra completa

Resumo

• Sintaxe CSS = seletor + bloco de declarações { } com declarações dentro
• Uma declaração tem a forma property: value;
• Um bloco pode conter várias declarações para o mesmo seletor
• Vírgulas agrupam seletores que compartilham estilos
• Cuidado com chaves, dois-pontos e ponto e vírgula evita falhas silenciosas
• Pratique alterando valores e adicionando declarações, e depois atualize a página