A utilização criteriosa da técnica de CSS (Cascading Style Sheets) permite modificar a aparência de centenas de páginas Web, apenas com o uso de um ficheiro. 'Style Sheets' oferecem muito mais flexibilidade em termos de efeitos na apresentação de páginas Web, propriedades como a cor, fundos, margens, e cercaduras podem ser estendidas a todos os elementos.

1. O que é o CSS ?

Utilizando apenas o HTML e as suas propriedades, como por exemplo o atributo BGCOLOR apenas ficarão disponíveis alguns elementos. O CSS permite dar mais flexibilidade e aplicar um determinado estilo a todos os parágrafos, a cabeçalhos ou enfatizar texto

Com Style Sheets, os programadores podem usar a propriedade de text-indent para indentar texto. As margens do texto podem ser facilmente conseguidas sem o recurso ao uso de tabelas. A utilização de Style Sheets também reduz a necessidade de procura e substituição por ficheiros múltiplos; se o autor decide alterar a indentação de todos os parágrafos num site, apenas tem que alterar uma linha na Style Sheets.

As técnicas utilizando Style Sheets representam um enorme avanço no desenvolvimento de páginas Web, porque determinam a separação entre os conteúdos e a apresentação, no fundo entre o HTML e o CSS

2. Tópicos sobre CSS

Uma Style Sheet é feita de regras de estilo que informam o 'browser' como devem apresentar um documento. Existem três métodos de aplicar o CSS a um documento HTML, podendo estas ser:

- Em linha (in-line) através do atributo style;

- Interno usando a tag style;

- Externo, usando uma ligação para uma folha de estilos.

Como exemplo do método em linha temos:

Repare que este método simples apenas é razoável para aquisição de alguma experiência com Style Sheets, ele tem desvantagens e estas devem ser consideradas antes do uso deste método na prática.

Exemplo do método interno usando a tag style. Este elemento é colocado na área HEAD e contém as regras para a página.

Descrição do exemplo: Segmento de código que define as propriedades da cor e o tamanho da fonte para os elementos H1 e H2.

O Style Sheet apresentado em seguida, informa o browser para mostrar o cabeçalho de nível 1 com tamanho de texto extra-largo, cor vermelho e o cabeçalho de nível 2 com fonte tamanho largo e cor azul. Com base neste exemplo, experimente mudar o texto e as propriedades da cor.

Repare que uma parte do código é inserido na zona head e outra na zona body, segue o exemplo:

Produzindo o seguinte efeito visual:

Reparou nos exemplos acima que cada regra é feita de um selector - usualmente um elemento de HTML como BODY, P, ou EM e o estilo que deverá ser aplicado ao selector. Existem numerosas propriedades que poderão ser definidas para um elemento. Cada propriedade tem um valor, que junto com a propriedade descreve como o selector deverá ser apresentado.

As regras são formadas da seguinte forma:

Selector { propriedade: valor}

Múltiplas declarações no mesmo selector deverão ser separadas por um ponto e vírgula:

Selector { propriedade1: valor1; propriedade2: valor2}

Página Seguinte (2/3)