Netscape DevEdge

Skip to: [content] [navigation]

Busca

Cascading Style Sheets

Saiba como o CSS pode auxiliar na padronização e manutenção da aparência de seus websites

O CSS (Cascading Style Sheets) é um padrão de declarações de estilo mantido pelo W3C, World Wide Web Consortium, que informa ao navegador como exibir determinados documentos. Com o CSS é permitido, por exemplo, redefinir o estilo de tags e alterar e padronizar o estilo de centenas de páginas HTML editando apenas um arquivo.

Existem três maneiras de utilizar o CSS em seu website: de forma externa, incorporada ou local.

Para inserir o estilo CSS de forma local, a declaração é feita dentro da tag do elemento HTML a ser customizado:

<A HREF="teste.html" STYLE="font-size: 12pt; color: green; background-color: yellow">
Link com CSS dentro da Tag
</A>

Neste exemplo, o link em questão apresenta um texto com o tamanho da fonte de 12pts, cor verde e fundo amarelo.

Note que as características definidas através do CSS são herdáveis. Se antes do link em questão tivesse sido definido um estilo para o parágrafo em que o link está inserido, além das propriedades utilizadas para o link, este herdaria também as propriedades configuradas para o parágrafo.

<P STYLE="font-style: italic"> Este parágrafo está em itálico por causa do CSS.
Note que o link herdou
esta propriedade, pois ele pertence ao mesmo parágrafo.
<A HREF="teste.html" STYLE="font-size: 12pt; color: green; background-color: yellow">
Link com CSS dentro da Tag
</A>

Para introduzir o estilo de forma incorporada, o código deve ser inserido nas tags <HEAD></HEAD> da página, conforme mostrado a seguir:

<HTML>
<HEAD>
<TITLE>Teste de CSS</TITLE>
<STYLE TYPE="text/css">
    A {color: blue; background-color: red}
    P {color: green}
</STYLE>
</HEAD>

Isto faz com que todos os links tenham fonte azul e fundo vermelho e todos os parágrafos que iniciarem com a tag <P> terão fonte verde.

De todas as formas de utilização do CSS, talvez a mais interessante e poderosa seja a possibilidade de vincular uma folha de estilo (Style Sheet) a todas as páginas que compõem um website, mantendo assim um determinado padrão entre todas elas. Esta prática também facilita uma possível manutenção no estilo de seu website, já que é mais prático alterar apenas o código da folha de estilo do que todas as páginas em que as alterações devem ser feitas.

Para entender como isso funciona, crie um arquivo chamado estilo.css com o seguinte conteúdo:

A { color: blue; background-color: red}
P { color: green}

Agora, na página que utilizará a folha de estilo, acrescente entre as tags HEAD a seguinte linha:

<LINK rel="stylesheet" href="estilo.css" type="text/css">

Esta linha indica ao navegador que ele deve buscar as marcações de estilo no arquivo estilo.css.

Em nosso exemplo, criado para demonstrar a utilização, o código da página HTML e a sua exibição ficou assim:

<HTML>
<HEAD>
<TITLE>Teste de CSS</TITLE>
<LINK rel="stylesheet" href="estilo.css" type="text/css">
</HEAD>
<BODY>
<BR>
<P>Este arquivo demonstra o uso de CSS em um arquivo separado. 
O texto que está entre a tag P sempre ficará em verde.
</P> <BR><BR> Já os links ficarão com fundo vermelho e fonte azul. <A HREF="teste.html">Link 1</A> <BR> </BODY> </HTML>

O CSS permite ir mais além, possibilitando que sejam definidas reações a determinadas ações dos visitantes, como por exemplo, fazer com que o fundo de um link troque de cor quando o mouse passar sobre ele.

Para isso, abra o arquivo estilo.css e acrescente a seguinte linha:

A:hover { color: blue; background-color: yellow }

Esta linha faz com que o link mude a cor do background de vermelho para amarelo.

Para deixar seus links ainda mais personalizados, você pode acrescentar a linha A {text-decoration:none;} no arquivo estilo.css. Esta linha faz com que os links não tenham o efeito de sublinhado padrão.

O CSS também permite que você defina classes para manter um maior controle sobre as configurações. Você pode definir uma classe genérica ou aplicável a algum elemento HTML. Abaixo está um exemplo de classes definidas em um CSS incorporado:

<HTML>
<HEAD>
<TITLE>Teste de Classes</TITLE>
<STYLE type="text/css">
   .MARCA { color: green }
   P.MARCA { color: blue; background-color: yellow}
</STYLE>
</HEAD>
<BODY>
<BR>Todos os itens onde a classe MARCA for 
<b class="MARCA">aplicada</b>, terão a fonte em verde. <P CLASS="MARCA">Mas em uma tag P o estilo será de fonte azul e fundo amarelo!</P> </BODY> </HTML>

Esta foi apenas uma pequena demonstração de como o CSS pode auxiliar e facilitar a vida na manutenção de seus websites. Sugiro que as pessoas interessadas em se aprofundar no assunto visitem o website da W3C, onde há alguns exemplos, tutoriais e novidades sobre o padrão. O CSS pode controlar desde o posicionamento dos elementos de uma página até a maneira como o seu conteúdo deve ser convertido em voz, nos navegadores que possuem esta função.

Um bom software para a criação de websites com CSS é o Bluefish, que pode ser encontrado no website bluefish.openoffice.nl/

Para Saber Mais

Felipe Arruda
felipe @ RevistaDoLinux.com.br

Reproduzido com a permissão da Revista do Linux (http://www.RevistaDoLinux.com.br)

Referências adicionais sobre CSS

A+O