Sintaxe CSS com suas 3 partes e Comentários CSS

A sintaxe CSS é o conjunto de regras que diz ao navegador como estilizar o HTML. Toda regra CSS segue o mesmo padrão, então, uma vez que você aprende a forma de uma regra, consegue ler todas as outras. Este capítulo divide esse padrão em suas três partes, mostra um exemplo funcional e explica como escrever comentários.

Se você é completamente novo no CSS, leia a introdução ao CSS primeiro para ver como as folhas de estilo se conectam a uma página.

A Anatomia de uma Regra CSS

Uma regra CSS (também chamada de conjunto de regras) é construída a partir de duas partes: um seletor e um bloco de declaração. Dentro do bloco de declaração, cada declaração é um par propriedade: valor.

selector {
  property: value;
}

No conjunto, uma regra consiste em três coisas que você precisa saber:

Seletor — quais elemento(s) estilizar.
Propriedade — qual aspecto alterar.
Valor — a configuração a aplicar.

Seletor

O seletor direciona o elemento HTML que você deseja estilizar. Pode ser qualquer tag como <h1> ou <p>, uma classe ou um ID. Um único seletor pode conter uma ou várias declarações. Seletores são um tópico próprio — consulte seletores CSS para a lista completa.

Propriedade

A propriedade é o recurso específico que você deseja alterar, como color, border ou font-size. Cada propriedade aceita um tipo específico de valor, e toda propriedade deve ser combinada com um.

Valor

O valor é o que você atribui à propriedade. Por exemplo, o valor da propriedade color pode ser uma palavra-chave como red ou um código hexadecimal como #f1f1f1.

Regras de sintaxe para lembrar

Um dois-pontos (:) separa uma propriedade do seu valor.
Um ponto e vírgula (;) encerra cada declaração e separa uma da próxima.
O bloco de declaração inteiro é envolvido por chaves ({ }).
O CSS ignora espaços em branco e quebras de linha extras entre seletores, propriedades e valores, então você é livre para formatar as regras de modo legível.

Um seletor pode ter mais de uma declaração, cada uma separada por ponto e vírgula:

p {
  color: #1c87c9;
  font-size: 16px;
  line-height: 1.5;
}

Exemplo de sintaxe CSS

Exemplo de Sintaxe CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Experimente Você Mesmo »

Resultado

No exemplo acima, a tag <a> é o seletor, color é a propriedade e #1c87c9 é o valor. A propriedade e seu valor ficam dentro das chaves, separados por dois-pontos e encerrados com ponto e vírgula.

Comentários CSS

Os comentários permitem que você adicione explicações ou notas à sua folha de estilos. Os navegadores os ignoram, então nunca afetam a página. São úteis para documentar por que uma regra existe, rotular seções ou desativar temporariamente uma declaração enquanto você depura.

Um comentário CSS começa com /* e termina com */:

Exemplo de Comentários em CSS

/* This is a comment */

Os comentários também podem abranger várias linhas, o que é útil para bloquear várias declarações de uma vez:

/*
  This whole block is ignored by the browser.
  color: red;
  font-size: 20px;
*/

Observe que os comentários CSS não podem ser aninhados — uma vez que você abre /*, o primeiro */ encerra o comentário. Lembre-se também de que // não é um comentário CSS válido; funciona em alguns pré-processadores como o Sass, mas não em CSS puro.

Exemplo de comentários CSS

Exemplos de Comentários CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Resumo

Uma regra CSS é um seletor mais um bloco de declaração entre chaves.
Cada declaração é um par propriedade: valor, encerrado por ponto e vírgula.
Espaços em branco são ignorados, então formate as regras como for mais legível.
Os comentários são escritos com /* ... */ e podem abranger várias linhas, mas não podem ser aninhados.

A seguir, aprenda como anexar essas regras a uma página em estilos HTML e depois explore seletores CSS para direcionar exatamente os elementos que você deseja.

Prática

Qual das seguintes opções descreve a sintaxe CSS correta?

Uma declaração CSS consiste em uma propriedade e seu valor, separados por dois-pontos.Um bloco CSS é envolto em colchetes.As propriedades e valores em uma declaração CSS são separados por ponto e vírgula.Os conjuntos de regras CSS consistem em um seletor seguido de um bloco de declaração entre chaves.Os conjuntos de regras CSS consistem em um seletor seguido de um bloco de declaração entre parênteses.