Gramática básica do CSS

Sintaxe do CSS

As regras CSS consistem em duas partes principais: o seletor e uma ou mais declarações.

selector {declaration1; declaration2; ... declarationN {}

O seletor geralmente é o elemento HTML que você deseja alterar o estilo.

Cada declaração é composta por uma propriedade e um valor.

A propriedade (property) é o estilo de atributo (style attribute) que você deseja configurar. Cada propriedade tem um valor. A propriedade e o valor são separados por dois pontos.

selector {property: value{}

Esta linha de código define a cor do texto do elemento h1 como vermelha e define o tamanho da fonte como 14 pixels.

Neste exemplo, h1 é o seletor, color e font-size são propriedades, red e 14px são valores.

h1 {color:red; font-size:14px;}

A ilustração a seguir mostra a estrutura do código acima:

Sintaxe do CSS

Dica:Use chaves para envolver a declaração.

Diferentes formas de escrever valores e unidades

Além da palavra inglesa red, podemos usar o valor hexadecimal de cor #ff0000:

p { color: #ff0000; }

Para economizar bytes, podemos usar a forma abreviada do CSS:

p { color: #f00; }

Podemos usar RGB valores de duas maneiras:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Atenção, ao usar RGB em porcentagem, mesmo que o valor seja 0, é necessário usar o símbolo de porcentagem. Mas em outros casos, isso não é necessário. Por exemplo, quando o tamanho é 0 pixel, não é necessário usar a unidade px após 0, porque 0 é 0, independentemente da unidade.

Lembre-se de usar aspas

Dica:Se o valor for várias palavras, é necessário usar aspas:

p {font-family: "sans serif";}

Declarações múltiplas:

Dica:Se precisar definir mais de uma declaração, é necessário usar ponto-e-vírgula para separar cada declaração. O exemplo a seguir mostra como definir um parágrafo centralizado com texto vermelho. A última regra é que não é necessário usar ponto-e-vírgula, pois ele é um símbolo de separação, não de fim. No entanto, a maioria dos designers experientes adiciona ponto-e-vírgula no final de cada declaração, pois isso ajuda a reduzir a possibilidade de erros ao adicionar ou remover declarações existentes. Assim:

p {text-align:center}; color:red;{}

Você deve descrever apenas um atributo em cada linha, o que melhora a legibilidade da definição de estilo, assim:

p {
  text-align: center;
  color: black;
  font-family: arial;
{}

Espaços e maiúsculas/minúsculas

A maioria das tabelas de estilo contém mais de uma regra, e a maioria das regras contém mais de uma declaração. O uso de declarações múltiplas e espaços torna as tabelas de estilo mais fáceis de editar:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  {}

O contém de espaço não afeta o efeito de trabalho do CSS no navegador, da mesma forma, diferentemente do XHTML, o CSS é insensível a maiúsculas e minúsculas. No entanto, há uma exceção: se envolver o trabalho com documentos HTML, os nomes de class e id são sensíveis a maiúsculas e minúsculas.