Como o CSS é escrito?

Uma regra CSS é formada por três partes: o seletor, a propriedade e o valor.

1seletor {
2  propriedade: valor;
3}

Veja um exemplo real:

1h1 {
2  color: blue;
3  font-size: 32px;
4}

Nesse exemplo:

• h1 é o seletor: indica qual elemento HTML será estilizado;
• color e font-size são as propriedades: o que você quer mudar;
• blue e 32px são os valores: como você quer que fique.

O conjunto de propriedade: valor é chamado de declaração. O bloco entre { e } pode ter quantas declarações forem necessárias.

Cada declaração termina com ponto e vírgula

O ; ao final de cada declaração é obrigatório quando existem várias. Sem ele, o navegador pode interpretar as regras de forma errada.

1p {
2  color: red;
3  font-size: 16px;
4  font-weight: bold;
5

Por costume, muitos desenvolvedores colocam o ; mesmo na última declaração do bloco. É uma boa prática: facilita adicionar novas linhas sem esquecer o separador.

Espaços e quebras de linha não importam

O CSS ignora espaços extras e quebras de linha. Estas duas regras fazem a mesma coisa:

1/* Forma expandida */
2p {
3  color: red;
4  font-size: 16px;
5

A forma expandida é mais fácil de ler e é a padrão no dia a dia.

Maiúsculas e minúsculas

O CSS não diferencia maiúsculas de minúsculas em propriedades e valores. Mas por convenção, tudo é escrito em letras minúsculas.

1/* Os dois funcionam, mas o segundo é o padrão */
2P { COLOR: RED; }
3p { color: red; }