CSS básico #001

CSS A SINTAXE

A sintaxe das definições CSS é composta por duas partes: um seletor e uma declaração.
Exemplo:



No exemplo o seletor H1 diz que o estilo se aplica a elementos e a definição diz que a cor do texto destes elementos deve ser preto.
A declaração fica entre chavetas ({...}) e pode conter várias definições. Cada definição é formada por um par propriedade:valor, em que o valor é separado da propriedade pelo carácter : (dois pontos.) A exemplo seguinte ilustra isto de forma genérica:



O seletor é normalmente o nome de um elemento do HTML, mas também pode ser um seletor de classe, um seletor de ID ou um seletor contextual (estes conceitos serão esclarecidos mais à frente.)
Dentro das chavetas (caracteres { e }) podemos colocar várias definições separadas pelo carácter ";" (ponto e vírgula). O exemplo seguinte define três propriedades para o elemento , que são o alinhamento, a cor do texto e o tipo de letra.



AGRUPANDO SELETORES

Se precisarmos de aplicar os estilos a mais do que um elemento podemos agrupar os seletores que partilham as mesmas definições. Para isso escrevemos uns a seguir aos outros separados por vírgulas. No exemplo seguinte os elementos de até partilham todos a mesma definição:



SELETORES DE CLASSE

Os seletores de classe permitem-nos definir estilos diferentes que podem ser aplicados ao mesmo elemento.
Imagine que precisa de ter dois tipos diferentes de parágrafo no documento: um alinhado à direita e outro alinhado ao centro. Eis como os seletores de classe tornam isto muito fácil:



Os seletores de classe também podem ser definidos sem colocarmos o nome de um elemento no início da definição. Quando isso acontece as definições podem ser aplicadas a qualquer elemento cujo atributo class tenha o valor correcto. O exemplo seguinte define uma classe que pode ser utilizada com qualquer elemento do HTML:



SELETOR DE ID

O seletor de id é diferente do seletor de classe porque se aplica a um único elemento da página. As regras do HTML ditam que os valores do atributo id não podem repetir-se numa mesma página. Daí resulta que o número de elementos no documento com um determinado id é um ou é zero.
A regra de seleção para o estilo definido no exemplo seguinte indica que ele só pode ser aplicado a um elemento que tenha o valor "para1" no atributo id:



Se quisermos que a regra se aplique a qualquer elemento que tenha o id para1 basta escrevê-la na forma seguinte:



A regra acima é aplicável a qualquer elemento que tenha o id correto porque o seletor * diz que ela se aplica a todos os elementos. No exemplo seguinte ela seria aplicada ao elemento :



ESCREVER COMENTÁRIOS NUMA FOLHA DE ESTILOS

Podemos inserir comentários nas definições CSS para explicar o código que escrevemos tornando-o mais fácil de compreender. Quando mais tarde voltarmos a uma folha de estilos, ou se a partilharmos com outra pessoa, será mais fácil perceber como funciona.
Para iniciar um comentário escreva a sequência de caracteres "/*", depois o texto do comentário, e no fim escreva "*/" para terminar o comentário. O exemplo seguinte mostra como se faz: