Estrutura do CSS

As folhas de estilo funcionam basicamente através de regras que são vinculadas às tags HTML. E o que torna fácil a criação de folhas de estilo é que essas regras obedecem a uma estrutura muito simples, composta por seletor, propriedade e valor. Vou falar resumidamente sobre cada um deles.

Seletor: é o que vinculará a regra criada ao elemento HTML.

Propriedade: define qual formatação será recebida pelo elemento.

Valor: define o quê, de fato, será atribuído a essa regra.

As regras seguirão, portanto, sempre esse formato:

Seletor { propriedade : valor; }

Sempre será preciso envolver a propriedade e o seu valor com as chaves, conforme exibido acima. E, após a definição do valor, a sintaxe da linguagem pede a inserção do sinal de ponto e vírgula. Uma regra simples seria:

h1 { color: green; }

Essa regra aplicará, para o conteúdo das tags <h1> do HTML, a cor verde.

Vale ressaltar também que é possível agrupar várias propriedades e valores em um único seletor, o que facilita muito as coisas e acontece com enorme frequência, conforme o exemplo abaixo:

h1 { font size:16px; text-align: justify; line-height: 20px;}

Essa regra está definindo, em todo o conteúdo de h1, textos com tamanho de 16 pixels, com alinhamento justificado e dentro de linhas com tamanho de 20 pixels. É tudo muito simples! Para facilitar a leitura das regras, também é possível definir cada propriedade em uma linha, ficando da seguinte forma:

h1 {
font size:16px;
text-align: justify;
line-height: 20px;
}

Caso você esteja começando a trabalhar com CSS agora, aconselho que faça a formatação de uma propriedade por linha, pois acredito que a leitura fique mais clara, facilitando a localização de determinada propriedade quando se quiser fazer alguma alteração. De qualquer forma saiba que a diferença é apenas visual, mas o navegador interpretará da mesma forma, tanto uma quanto a outra. Você pode cria-las como preferir.