Estilos diferentes para links em uma mesma página

Publicado em: 25/10/2004

Introdução

Neste tutorial mostro as técnicas CSS para aplicação de estilos diferentes para links em uma mesma página web.

A dúvida

Tenho recebido vários e-mails com uma dúvida bastante comum entre aqueles que começam a projetar com CSS e por vezes até mesmo entre outros já familiarizados com uso das folhas de estilo.

Quando aplico estilos para links em uma página web TODOS os links assumem o mesmo aspecto da estilização.
Como faço para estilizar de maneira diferente links em uma mesma página?

Uma página de links como base do aprendizado

Vamos tomar como base para desenvolver nosso estudo uma página contendo três links e estabelecer regras CSS para estilizá-los de maneira distinta:

Este é o HTML da página:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>>
  <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Página de links</title>
  </head>
  <body>
  <p><a href="#">Link número 1</a></p>
  <p><a href="#">Link número 2</a></p>
  <p><a href="#">Link número 3</a></p>
  </body>
</html> 

Veja a página básica

Estilizando os links

Para estilizarmos links em uma página web devemos conhecer os quatro "Seletores: pseudo classes de links", bem como a "Prioridade nas declarações para links" ou seja a sequência em que as regras CSS para cada um dos estados deve ser declarada na folha de estilos. Este assunto foge ao escopo deste tutorial mas se você quiser rever ou entender aqueles conceitos consulte este tutorial

Vamos estabelecer os seguintes parâmetros de estilização.

Links no estado UP ou inicial: cor #FF0000 (vermelha), sem sublinhado;
Links no estado VISITED ou link visitado: cor #999999 (cinza), sem sublinhado;
Links no estado OVER ou mouse sobre o link: cor #000000 (preta), com sublinhado;
Links no estado ACTIVE ou link que foi clicado: cor #00FF00 (verde), com sublinhado e fundo na cor #000000 (preta);

E aqui as regras CSS em folha incorporada, para esta estilização:

<style type="text/css">
  <!--
  a:link {
color:#FF0000;
text-decoration:none;
}
a:visited {
color:#999999;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
a:active {
color:#00FF00;
text-decoration:underline;
background-color:#000000;
}
-->
</style> 

Veja a página básica com estas regras CSS

Criando as classes de estilização

Como você acabou de constatar todos os três links da página estão estilizados de maneira idêntica.
Para diferenciar os estilos nos links devemos usar classes de estilização.

Assim, criamos três classes para os três links e vamos nomeá-las assim:
linkum - linkdois - linktres criando as classes .linkum - .linkdois - .linktres

Agora nosso HTML ficará assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>>
  <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Página de links</title>
  </head>
  <body>
  <p><a href="# "class="linkum">Link número 1</a></p>
  <p><a href="#" class="linkdois">Link número 2</a></p>
  <p><a href="#" class="linktres">Link número 3</a></p>
  </body>
</html> 

As regras de estilo para as classes

Agora basta definir regras de estilo diferentes para as três classes estabelecidas.
Observe as regras a seguir:

<style type="text/css">
<!--
/* PARA O LINK 1 */

a.linkum:link {
color:#FF0000;
text-decoration:none;
}
a.linkum:visited {
color:#999999;
text-decoration:none;
}
a.linkum:hover {
color:#000000;
text-decoration:underline;
}
a.linkum:active {
color:#00FF00;
text-decoration:underline;
background-color:#000000;
}

/* PARA O LINK 2 */

a.linkdois:link {
color:#FFCC00;
}
a.linkdois:visited {
color:#669900;
}
a.linkdois:hover {
color:#0000FF;
text-decoration:underline overline;
}
a.linkdois:active {
color:#FFFFFF;
text-decoration:none;
background-color:#000000;
}

/* PARA O LINK 3 */

a.linktres:link {
color:#00FF00;
background-color:#000000;
text-decoration:none;
}
a.linktres:visited {
color:#000000;
text-decoration:line-through;
}
a.linktres:hover {
color:#000000;
background-color:#FF0000;
text-decoration:none;
}
a.linktres:active {
color:#FFFF00;
text-decoration:none;
background-color:#000000;
}
-->
</style>

Veja a página básica com as três classes
e suas regras CSS aplicadas

E concluindo podemos verificar que para estilizar links em uma mesma página de maneira diferente basta aplicarmos e estilizarmos classes para os links.

Nota final

Se você tem uma página onde a maioria dos links seguirá uma estilização e uns poucos outros será estilizado de modo diferente você não precisa criar a classe para a maioria dos links.
Faça assim:
Aplique a regra CSS para a maioria dos links como mostrado no item "Estilizando os links" ou seja, sem classes e depois crie as classes somente para os demais links estilizados de modo diferente da maioria.