Uso das CSS II

Descrevemos os usos mais avançados das folhas de estilo em cascata, para podermos utilizá-las da maneira mais potente.

Estilo definido para toda uma página

Podemos definir no cabeçalho do documento, estilos para que sejam aplicados a toda página. É uma maneira muito cômoda de dar forma ao documento e muito potente, já que estes estilos continuarão em toda a página e com isso, economizaremos muitas etiquetas HTML que dão forma ao documento. Além disso, se desejamos mudar os estilos da página simplesmente faremos de uma vez só.

Este exemplo é mais complicado visto que utiliza a sintaxe CSS de forma mais avançada. Mas não se preocupe, pois com os exemplos você irá aprendendo seu uso e mais tarde comentaremos a sintaxe com mais profundidade.

No exemplo vemos que se utiliza a etiqueta <STYLE> colocada no cabeçalho da página para definir os diferentes estilos do documento.

Simplificando, entre as etiquetas <STYLE> e </STYLE>, se coloca o nome da etiqueta que queremos definir os estilos e entre chaves -{ }- colocamos em sintaxe CSS as características de estilos.

<html>
<head>
<title>Exemplo de estilos para toda uma página</title>
<STYLE type="text/css">

</STYLE>
</head>

<body>
<h1>Página com estilos</h1>
Bem-vindos...
<p>Desculpe ser tão breve, mas isto é um exemplo sem importância</p>
</body>
</html>

Como se pode apreciar no código, definimos que a etiqueta <H1> se apresentará:

Sublinhada
Centralizada

Também, por exemplo, definimos que no corpo do texto inteiro da página (etiqueta <BODY> serão aplicados os seguintes estilos:

Cor do texto negro
Cor do fundo acinzentado
Margem lateral de 1 centímetro

Cabe destacar que se aplicamos estilos à etiqueta <BODY>, estes serão herdados pelo resto das etiquetas do documento. Isto será sempre assim, e no caso de que não volte a definir estes estilos nas seguintes etiquetas, dominará a etiqueta mais concreta. Este detalhe pode ser visto na etiqueta <P>, que tem definidos estilos que já foram definidos para <BODY>. Os estilos que são aplicados são os da etiqueta <P> que é mais concreta.

Por último, é válido apreciar os comentários HTML que englobam toda a declaração de estilos: . Estes comentários são utilizados para que os navegadores antigos que não compreendem a sintaxe CSS, não incluam esse texto no corpo da página. Caso contrário, os navegadores antigos (por exemplo Netscape 3) escreveriam esse "feio código" na página.

Estilo definido para todo o site web

Uma das características mais potentes da programação com folhas de estilo, consiste em que podemos definir os estilos de todo um site web de uma só vez. Isto se consegue criando um arquivo onde somente colocamos as declarações de estilos de página e linkando todas as páginas do site com esse arquivo. Dessa forma, todas as páginas compartem uma mesma declaração de estilos e, portanto, se a mudamos, mudarão todas as páginas. Todas as vantagens acrescentadas de que se economiza em linhas de código HTML (o que reduz o peso do documento) e se evita a moléstia de definir uma e outra vez os estilos com o HTML, tal como foi comentado anteriormente.

Veremos agora como o processo para incluir estilos com o arquivo externo.

1 - Criamos o arquivo com a declaração de estilos

É um arquivo de texto normal, que pode ter qualquer extensão, apesar de podermos atribuir a extensão .css para lembrarmos que tipo de arquivo é. O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, ou seja, seria errado incluir o código HTML nas etiquetas e etc. Podemos ver um exemplo a seguir:

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2 - Linkamos a página com a folha de estilos

Para isso, vamos colocar a etiqueta <LINK> com os atributos:

rel="STYLESHEET" indicando que o link é com uma folha de estilos
type="text/css" porque o arquivo é de texto, em sintaxe CSS
href="estilos.css" indica o nome do arquivo fonte dos estilos

Vejamos uma página web inteira que linka com a declaração de estilos anterior.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lê estilos</title>
</head>

<body>
<h1>Página que lê estilos</h1>
Esta página tem no cabeçalho a etiqueta necessária para linkar com a folha de estilos. É muito fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Isto está dentro de um TD, logo tem estilo próprio, declarado no arquivo externo</td>
</tr>
<tr>
<td>A segunda fila do TD</td>
</tr>
</table>

</body>
</html>

O resultado conseguido por ser visto aqui.

Regras de importância nos estilos

Os estilos se herdam de uma etiqueta para outra, tal como foi indicado anteriormente. Por exemplo, se temos declarado no <BODY> alguns estilos, em geral, estas declarações também afetarão à etiquetas que estejam dentro desta etiqueta, ou o que é o mesmo, dentro de todo o corpo.

Em muitas ocasiões mais de uma declaração de estilos afeta a mesma parte da página. Sempre se leva em conta a declaração mais particular. Porém, as declarações de estilos podem ser realizados de múltiplas formas e com várias etiquetas, também entre essas formas existe uma hierarquia de importância pra resolver conflitos entre várias declarações de estilos diferentes para uma mesma parte da página. Pode ser visto a seguir, esta hierarquia, primeiro colocamos as formas de declarações mais gerais, e portanto, menos respeitadas em caso de conflito:

Declaração de estilos com arquivo externo. (para todo o site web)
Declaração de estilos para toda a página. (com a etiqueta <STYLE> no cabeçalho da página)
Estilos definidos em uma parte da página. (com a etiqueta <DIV>)
Definidos em uma etiqueta em concreto. (Utilizando o atributo style na etiqueta em questão)
Declaração de estilo para uma pequena parte do documento. (Com a etiqueta <SPAN>)

Já vimos como incluir estilos na página, de todas as maneiras possíveis e fizemos uma revisão com a lista anterior. Agora você já está em condições de começar a usar as folhas de estilo em cascata para melhorar sua página e aumentar a produtividade de seu trabalho. Mas esteja atento aos capítulos seguintes onde irá aprende as lições que lhe faltam para dominar bem a matéria: conhecer a sintaxe, os diferentes atributos de estilos e outras coisas que irão melhorar sua página.