Curso de CSS / Sintaxe: seletores, declarações, comentários e erros

Uma regra de CSS combina um seletor com declarações escritas como propriedade: valor; dentro de chaves. A sintaxe correta ajuda o navegador a aplicar os estilos pretendidos, mas uma declaração malformada pode ser ignorada enquanto outras declarações válidas continuam funcionando.

Leia as partes de uma regra de CSS

.notice {
  color: #087f5b;
  padding: 16px;
}

Cada propriedade permite valores diferentes. Insira o valor da cor em color e o valor do comprimento em padding. padding: blue; não é um valor válido de espaçamento interno, mesmo que a palavra esteja escrita corretamente. 16px é escrito com números e unidades. Se você usar espaços como 16 px, ele não será lido como um único valor de comprimento.

Use chaves, dois-pontos, ponto e vírgula e espaços em branco

Quebras de linha e indentação ajudam a tornar o código mais fácil de ler para os humanos. As duas regras a seguir se aplicam da mesma forma porque têm o mesmo seletor e a mesma declaração. Quando você está aprendendo, é mais fácil encontrar símbolos ausentes se você separar as declarações linha por linha. Para escolher um seletor de acordo com os elementos a estilizar, consulte Seletores CSS Básicos: Tipo, Classe, ID e Atributos.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Embora a declaração final possa omitir seu ponto e vírgula, escrevê-lo de forma consistente torna adições posteriores mais seguras. Espaços em branco no seletor podem mudar o significado: .notice.urgent corresponde a um elemento com ambas as classes, enquanto .notice .urgent corresponde a um elemento da classe urgent descendente de um elemento da classe notice. Remover esse espaço altera o seletor. Veja MDN: Introdução.

Agrupe seletores e escreva comentários

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

Uma vírgula liga múltiplos seletores ao mesmo bloco de declaração. h1, h2 seleciona h1 e h2 respectivamente, e h1 h2 é outro seletor que encontra h2 dentro de h1. Uma vírgula é apropriada para o propósito de aplicar a mesma cor.

Comentários em CSS começam com /* e terminam com */. Declarações dentro de comentários não são executadas no estilo. Pode ser usado para escrever uma explicação ou para excluir temporariamente uma regra, mas se o símbolo de fechamento for omitido, o código atrás dele pode ser tratado como comentário. No CSS regular, o // do JavaScript não é usado como notação de comentário de linha única.

Compare erros de declaração e erros de seletor

Quando um navegador encontra um erro em CSS, ele ignora a parte inválida e continua processando as possíveis regras. Isso nem sempre significa "ignorar uma linha que está errada." Delimitadores ausentes ou erros no seletor podem ter um grande impacto.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Apenas padding: blue é inválido aqui. A menos que existam outras regras, a cor do texto e a cor de fundo são aplicadas, e o padding não é alterado por esta declaração. Mesmo que a propriedade seja escrita incorretamente, como colro, a declaração não será reconhecida.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

Este bloco está faltando um ponto e vírgula após a primeira declaração. O navegador lê blue background-color: #e9f7ef como o valor de color, o que é inválido. Nem a cor pretendida nem a declaração de fundo pretendida se aplicam, mas padding: 16px; ainda se aplica. Adicione o ponto e vírgula que falta após blue.

h1, .notice:made-up-state {
  color: blue;
}

Uma pseudo-classe desconhecida torna esta lista de seletores comuns separados por vírgula inválida, então a regra também deixa de se aplicar a h1. Certas listas de seletores especiais usam análise tolerante. Portanto, este exemplo não descreve o comportamento de todos os contextos de listas de seletores. Veja MDN: Tratamento de erros de CSS.

Execute o exemplo completo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Se você salvar o código inteiro como index.html e abri-lo, h1 e h2 são do mesmo verde, e o aviso tem um fundo claro, 16px de espaçamento interno e borda de 1px. O parágrafo descritivo aparece com fonte de 18px. font-size é a propriedade que define o tamanho da fonte, line-height é a altura da linha, e border é a borda. Aqui ele é usado como uma propriedade auxiliar para conectar sintaxe e resultados.

Encontre e corrija erros de sintaxe

Substitua o bloco .notice em todo o exemplo pelo código abaixo. O objetivo é corrigir dois erros de sintaxe e fazer com que seja “texto azul, fundo verde claro, 16px de espaçamento interno.” Você pode facilmente reverter copiando o arquivo original para um nome diferente antes de alterá-lo.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Mude colro para color e adicione dois pontos após background-color. Salve e atualize: o aviso deve ter texto azul, fundo verde claro e espaçamento interno de 16px. O espaçamento interno já era válido, então algum espaço pode permanecer mesmo antes de os erros de sintaxe serem corrigidos.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

Se sua edição não alterar a página, primeiro verifique se você abriu o arquivo correto. Em seguida, Inspecione o CSS com DevTools: Styles e Computed para ver quais valores realmente se aplicam. Distinga erros de sintaxe, seletores que correspondem ao elemento errado e conflitos entre regras antes de alterar mais valores.