Sintaxe CSS

Estrutura Básica das Regras CSS

Os estilos CSS consistem em uma série de conjuntos de regras, cada um contendo um Seletor e um Bloco de declaração. O navegador analisa essas regras e as aplica aos elementos correspondentes no documento HTML.

A estrutura básica de sintaxe é:

seletor {
  propriedade1: valor1;
  propriedade2: valor2;
  /* Mais declarações... */
}

Decomposição dos Componentes

Seletor: O seletor é o núcleo do CSS, usado para "selecionar" os elementos HTML que você deseja estilizar. Pode ser um nome de tag HTML, nome de classe, nome de id, ou combinações mais complexas de seletores.

Bloco de declaração: Envoltos em chaves {}, contendo uma ou mais declarações.

Declaração: Consiste em uma propriedade e valor separados por dois-pontos ingleses :, com cada declaração terminando com ponto e vírgula inglês ;.

Propriedades: Propriedades são características específicas no CSS usadas para definir estilos de elementos. Cada propriedade tem um nome descrevendo o tipo de estilo a modificar, como color, border, font-size, etc.

Valores: Definem o efeito visual específico de uma propriedade, compostos por números com unidades ou palavras-chave.

Um Exemplo Completo

Exemplo

<style>
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}
</style>
<h1>Título de Primeiro Nível</h1>

Esta regra significa: selecionar todos os elementos <h1> na página, mudar a cor do texto para azul, definir o tamanho da fonte para 24 pixels, e alinhar ao centro.

Comentários CSS

Comentários CSS usam a sintaxe /* conteúdo do comentário */. O navegador não analisa o conteúdo dos comentários. O CSS tem apenas este estilo de comentário — seja de linha única ou múltiplas linhas, tudo fica entre /* */.

Exemplo

<style>
/* Este é um comentário de linha única */

/*
  Este é um comentário
  de múltiplas linhas
*/

p {
  color: red; /* Também pode ser escrito após uma declaração */
}
</style>
<p>Este é um exemplo de parágrafo.</p>

Comentários são muito úteis no desenvolvimento — você pode usá-los para explicar o que certos estilos fazem, ou temporariamente "desabilitar" alguns estilos para depuração.

Notas de Sintaxe

1. Ponto e vírgula são separadores

Cada declaração deve terminar com um ponto e vírgula inglês ;, dizendo ao navegador que a declaração está completa. O ponto e vírgula após a última declaração pode ser omitido, mas é recomendado adicioná-lo para consistência e para facilitar adicionar novos estilos depois.

Exemplo

<style>
/* ✅ Recomendado: ponto e vírgula após cada declaração */
h1 {
  color: red;
  font-size: 20px;
}

/* ❌ Não recomendado: fácil de esquecer ponto e vírgula */
h2 {
  color: blue
  font-size: 18px /* Isso causará um erro */
}
</style>
<h1>Título de Primeiro Nível</h1>
<h2>Título de Segundo Nível</h2>
<span class="demo-blue">Texto azul</span>

2. Dois-pontos entre nomes de propriedades e valores

Os dois-pontos devem ser dois-pontos ingleses :. Pode haver espaços entre o nome da propriedade e os dois-pontos, mas é recomendado manter um estilo consistente.

3. Usando aspas

Alguns valores de propriedade (como nomes de fontes) que contêm espaços precisam ser envoltos em aspas:

Exemplo

<style>
p {
  font-family: "Microsoft YaHei", "宋体", sans-serif;
}
</style>
<p>Este é um exemplo de parágrafo.</p>

4. Sensibilidade a maiúsculas e minúsculas

Os nomes e valores das propriedades CSS não são sensíveis a maiúsculas e minúsculas na maioria dos casos, mas minúsculas são convencionalmente usadas. A única exceção é que alguns valores (como nomes de fontes, caminhos de URL) podem precisar preservar suas maiúsculas e minúsculas originais.

Exemplo

<style>
/* ✅ Recomendado: minúsculas consistentes */
p {
  color: red;
}

/* 🔄 Maiúsculas funcionam também, mas não recomendado */
P {
  COLOR: RED;
}
</style>
<p>Este é um exemplo de parágrafo.</p>
<p>Conteúdo de exemplo</p>

Erros Comuns de Sintaxe

Iniciantes frequentemente cometem os seguintes erros ao escrever CSS — tenha cuidado para evitá-los:

❓ Perguntas Frequentes

📖 Resumo

• A sintaxe CSS é na verdade muito simples: seletores selecionam elementos, e blocos de declaração contêm propriedades e valores
• Domine esta estrutura básica, e você pode ler e escrever qualquer regra CSS
• Lembre-se: cada declaração termina com ponto e vírgula, nomes de propriedades e valores são separados por dois-pontos, e comentários são envoltos em /* */

📝 Exercícios

1. Crie um arquivo HTML usando uma tag <style> para definir texto vermelho e tamanho de fonte 28px para elementos h1, e texto azul e tamanho de fonte 16px para elementos p.
2. Adicione comentários no código de estilo explicando o que cada estilo faz.
3. Escreva intencionalmente uma declaração incorretamente (ex: escrever colour em vez de color), abra a página em um navegador, e veja o que o painel Estilos nas Ferramentas do Desenvolvedor mostra.