À medida que você
for progredindo com o uso de CSS em suas páginas, com
certeza terá que usar técnicas mais avançadas
de formatação. Vamos imaginar que temos uma declaração
que aplica uma formatação a todos os parágrafos
da página. Até aí tudo bem. Mas, e se quisermos
que alguns desses parágrafos usem uma formatação
um pouco diferente? Poderíamos usar o estilo in-line
como o trecho de código seguinte:
<p style="text-align:
justify; color: red">
Mas é claro que aqui perderíamos todo o poder
de formatação fornecido pelas folhas de estilo
vinculadas. A saída é usar classes. Vamos ver
um exemplo de uma página usando este artifício.
Crie uma página HTML como o código seguinte (os
quatro parágrafos são iguais; apenas a definição
da classe no parágrafo 3 o torna diferente):
<html>
<head>
<title>Estudos CSS</title>
<style type="text/css">
<!--
p {font-family: verdana; font-size: 80%; color:
green}
.especial {font-family: "Courier New";
font-size: 60%; color: red}
//-->
</style>
</head>
<body>
<p>A Bolsa de Valores de São Paulo (Bovespa) sofreu
um tombo de 3,09% nesta quarta-feira, caindo aos 60.098 pontos.
A queda foi puxada pela forte desvalorização das
ações da Vale, que caíram 7,8% no dia.
O volume financeiro na Bolsa foi de R$ 8,3 bilhões.</p>
<p>A Bolsa de Valores de São Paulo (Bovespa) sofreu
um tombo de 3,09% nesta quarta-feira, caindo aos 60.098 pontos.
A queda foi puxada pela forte desvalorização das
ações da Vale, que caíram 7,8% no dia.
O volume financeiro na Bolsa foi de R$ 8,3 bilhões.</p>
<p class="especial">A Bolsa de Valores de São
Paulo (Bovespa) sofreu um tombo de 3,09% nesta quarta-feira,
caindo aos 60.098 pontos. A queda foi puxada pela forte desvalorização
das ações da Vale, que caíram 7,8% no dia.
O volume financeiro na Bolsa foi de R$ 8,3 bilhões.</p>
<p>A Bolsa de Valores de São Paulo (Bovespa) sofreu
um tombo de 3,09% nesta quarta-feira, caindo aos 60.098 pontos.
A queda foi puxada pela forte desvalorização das
ações da Vale, que caíram 7,8% no dia.
O volume financeiro na Bolsa foi de R$ 8,3 bilhões.</p>
</body>
</html>
Execute a página e veja o resultado. Para ver uma página
HTML já pronta com este exemplo, execute o arquivo lab1-9.htm
na pasta de exemplos. Vamos agora a algumas considerações:
1) Ao executar a página você perceberá
que os parágrafos 1, 2 e 4 estão formatados usando
a fonte Verdana na cor verde e com um tamanho de 80% proporcional
ao tamanho da fonte padrão. Veja a declaração
novamente:
p {font-family: verdana;
font-size: 80%; color: green}
2) Como era nossa vontade ter uma formatação
diferente no parágrafo 3, nós definimos dentro
de sua tag o uso da classe "especial". Veja em seguida
como isso foi feito:
<p class="especial">
É preciso perceber que todos os elementos que estiverem
usando esta classe terão a mesma formatação.
Isso é importante já que você pode definir
as classes em sua folha de estilo vinculada e então aplicá-las
aos elementos desejados (sem ser preciso o uso dos estilos in-line).
Observando a definição da classe na tag <p>,
você pode ver que usamos apenas o valor "especial"
(o nome dado à classe), mas, ao fazer a declaração
CSS, nós usamos um ponto antes do nome. Veja isso novamente:
.especial {font-family:
"Courier New"; font-size: 60%; color: red}
Todas as classes devem ser escritas usando o ponto, mas na hora
de inserí-las no elemento HTML, lembre-se de retirá-lo.
A título de exercício, tente inserir a classe
no segundo parágrafo e observe a página novamente.
Você pode ainda criar uma folha de estilo vinculada e
aplicar todos os conceitos vistos até agora.
<< Início do
curso | Como
usar IDs como seletores >> |
Precisa de um freelancer, códigos-fonte e exemplos completos?
Códigos-fonte 
Bancos de Dados
Usuários On-Line
Como usar classes como seletores
Veja dicas, truques e anotações de 
