Sintaxe CSS

1) Separação das declarações de uma regra

Quando mais de uma declaração for definida na regra, deve-se usar ponto e vírgula para separá-las. O ponto e vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade, no caso de haver mais de uma. Entretanto, recomenda-se que sempre se use o ponto e vírgula após uma declaração, isso porque, ao construir nossa folha de estilo, sempre estaremos acrescentando declarações, e essa prática nos poupará tempo de revisões.

Você também pode escrever todas as declarações na mesma linha ou em linhas separadas, o efeito será o mesmo. Sendo assim, tanto faz você escrever de uma ou de outra maneira mostrada a seguir.

É notório que a declaração feita em uma única linha prejudica a legibilidade. Assim, dê preferência à segunda forma de escrever. Dessa forma, será mais fácil ler e manter o código CSS.

2 – Sintaxe de valores que são palavras compostas

Quando uma propriedade tiver um valor que for uma palavra composta, ou seja, a palavra composta é separada por espaços, esse valor deverá ser escrito entre aspas duplas ou simples. Essa regra não se aplica aos valores de palavras compostas separadas por hifens, os quais devem ser definidos normalmente. As duas declarações abaixo estão corretas:

3 – Sensibilidade ao tamanho da caixa da fonte

Ao contrário do XHTML, a sintaxe da regra CSS não é sensível ao tamanho da caixa de fonte. Sendo assim, você pode escrever suas regras com letras maiúsculas ou minúsculas. Além disso, você pode inserir espaços entre os componentes das regras, que não fará diferença alguma, ficando a seu critério. Abaixo, temos alguns exemplos de regras válidas:

Já que existem inúmeras formas de você escrever o seu código CSS, adote a que melhor se adapta a você. Mas não misture as formas, por exemplo, se você começou a escrever o código em letras minúsculas, escreva-o dessa forma até o fim. Isso faz com que seu código seja consistente e facilita sua manutenção.

4) Agrupamento de seletores

Se vários elementos serão estilizados da mesma forma, pode-se agrupá-los em uma mesma regra. Por exemplo, ao construir a sua página, você pode desejar escrever todos os títulos de uma mesma cor, independente do seu nível (h1, h2 ou h3). Ao invés de você declarar uma regra para cada seletor, você pode agrupá-los. Os exemplos a seguir mostram as duas formas de se fazer essa estilização, com agrupamento de seletores e sem agrupamento.

Com agrupamento: