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 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.
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/.
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>
Para saber mais
CSS -
www.w3.org/Style/CSS/
W3C -
www.w3c.org
Bluefish -
bluefish.openoffice.nl/
Felipe Arruda - felipe@RevistaDoLinux.com.br
|
