Búfalo Informática - Usando CSS Folha de Estilos

Inscrições Abertas para as Novas Turmas de Webdesigner:

::Inscreva-se Já!::

Saiba mais sobre o assunto

Usando CSS - Folha de Estilos
I Parte

O uso de CSS - cascate style sheet - ou em bom português, folhas de estilos, não é novidade para a maioria dos webdesign, afinal além de garantir uma padronização nas páginas da web, é um recurso que poupa tempo e trabalho, tanto na hora de confeccionar, quanto na de atualizar o site.

Ao elaborarmos uma página , não apenas digitamos o texto e ponto. Para uma boa apresentação e visibilidade da mesma, utilizamos do recurso da formatação.

Um exemplo:
se desejarmos darmos destaque a uma determidada frase - o título de um artigo, por exemplo, podemos usar a tag <H1> - que vai reforçar a fonte, dando uma aparência de negrito, ao mesmo tempo que irá aumentar o seu tamanho e posicioná-la em destaque em relação ao restante do texto.

Se quisermos separarmos um bloco de texto de outro, usamos a tag <p> , para mudar tipo de letra, cor ou tamanho, a tag <font> e por ai vai.

Mas quando e queremos modificar esses padrões? Quero utilizar <H1>, mas a cor tem que ser vermelha e o estilo em itálico. Como fazer?

Poderíamos usar o metodo manual, acrescentando tais especificações na tag <H1>, só que além de restrito - seria aplicado apenas naquele texto com <H1>, pouco prático, pois todas as vezes que eu quisesse aplicar as mesmas mudanças em outros textos com<H1>, teríamos que digitar tudo de novo.

Isso poderia ocasionar erros, afinal digitar a mesma coisa várias vezes pode ser cansativo.
suponhamos, porém que assim tenha sido feito. Legal, agora você terá que repetir o mesmo procedimento nas dezenas de outras páginas do site.

Usando as Folhas de Estilos (CSS) é possível resolver esse problema e centenas de outros, pois podemos criar uma única página com todos os estilos desejados e apenas "linkar" essa página às outras que criarmos.

Sendo elemento, normalmente o nome da tag em que será aplicado o estilos.
ex: font

Atributo - um nome CSS válido, por exemplo font-size, font-color, background-image, entre outros.

Valor - a modificação que será aplicada no atributo anterior.
Ex: font-color:red

Quero que todos os meus textos que estejam em formato de <H1> tenham a cor vermelha e o tamanho de 28 pontos.

<head> [os estilos devem ser sempre incluidos entre as tags <hed></head>]
<style type="text/css"> [ sempre iniciamos as definições de estilo com esta entrada]
H1 {font-color: red;font-size:28 pt}
</style>
</head.

Reparem que há uma repetição do atributo font, o que é absolutamente desnecessário, neste caso, quando tenho que modificar o mesmo atributo várias vezes, basta fazer como o exemplo:

Colocando isso no cabeçalho de minha página, bastaria colocar a tag <h1> que o resultado final seria um texto em vermelho, com tamanho de 28pt.

a) Externo - criamos um arquivo .css, contendo todos os estilos que queremos aplicar nos nossos documentos e depois apenas criamos links entre a página de estilo e a página a ser modificada - sem dúvida é a maneira mais prática de lidar com estilos;

b) Interno - desse jeito, nós criamos no cabeçalho da página os estilos a serem aplicados no corpo da página - este metodo é válido somente se queremos mudar só aquela página;

c) Inline - o estilo é digitado diretamente na tag a ser modificada - de pouca utilidade prática.

Para criarmos uma folha de estilo externa podemos usar o bloco de notas do Windows, digitarmos os estilos que queremos aplicar em nossa página e salvar o resultado final como nome.css .

Ex:

<style type="text/css">

</style>

Na nossa página devemos linkar a página de estilos criada usando o código abaixo entre as tags <head></head>:

<LINK REL="STYLESHEET" HREF=" nome.css" TYPE="text/css">

É importante que no parâmetro HREF esteja bem especificado o endereço aonde se encontra a nossa folha de estilo.

Usando a folha de estilo externa, podemos aplicá-la em várias páginas do nosso site, facilitando a padronização de nosso design.

O processo para a criação do estilo interno é bem parecido com o do externo, a diferença é que os estilos criados só serão aplicados em uma única página.

Nesse caso o estilo é aplicado diretamente sobre o objeto.
Ex:
<table width:"75%" style="border:2px double #000000">

Esse metodo é o menos prático de todos os acima mencionados, pois o trabalho de digitação seria o mesmo para todas as páginas.

Ainda assim é bastante utilizado por pessoas que querem aplicar estilos diferentes em objetos iguais.

No caso do exemplo acima: imagine que quero aplicar esse estilo apenas em uma tabela, por isso aplico o estilo dentro da tag.

Isso não é necessário. Em CSS podemos criar grupos de estilos os quais nomeamos e depois indicamos na tag a quem ela vai se reportar.

Ex:
<STYLE TYPE="text/css"></STYLE

<BODY>
<table CLASS="estilo" width="75%" border="1">
<tr><td>pagina</td></tr>
<tr><td>pagina</td></tr>
<tr><td>pagina</td></tr>
<tr><td>pagina</td></tr>
</table></BODY></htmL>

O resultado final seria o abaixo:

Observe que para vincular o estilo definido a essa tabela usamos dentro da tag <table> o parâmetro ClASS.

Poderíamos usando esse metodo criar estilos diferenciados e depois acrescentarmos o parâmetro Class nas tags apropriadas.

Ou no caso de se tratar de um bloco de texto, utilizarmos a tag DiV ou Span - em caso de frases apenas, para isso, conforme o exemplo abaixo:

<STYLE TYPE="text/css">
span.borda1{width:320px;border-style:solid}
div.borda2{width:320px;border-style:outset}
</style>

<body>
<span class="borda1">veja o resultado</span>
<div class="borda2">veja o resultado</p>
</body></html>

Para um melhor aproveitamento de tempo poderíamos criar uma folha de estilos externas, usando o sistema anterior e vinculá-lo a nosso site e às tags especificas usando o parâmentro CLASS.
Assim teríamos um site mais limpo, padronizado e rápido de atualizar.

Na próxima semana continuarei esse artigo, agora falando
das novidades com a chegada da CSS2.

Patricia Daltro