Estilos diferentes para links em uma mesma página

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:

<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>

Veja a página básica (link abre em nova janela)

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 dos links na página básica mostrada.

1. Links no estado UP ou inicial: cor #ff0000 (vermelha), sem sublinhado;
2. Links no estado VISITED ou link visitado: cor #999999 (cinza), sem sublinhado;
3. Links no estado HOVER ou mouse sobre o link: cor #000000 (preta), com sublinhado;
4. Links no estado ACTIVE ou link que foi clicado: cor #00ff00 (verde), com sublinhado e fundo na cor #000000 (preta);

Observe a seguir as regras CSS ( em folha de estilos incorporada - link abre em nova janela ) para obter a estilização proposta.

<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 (link abre em nova janela) com estas regras CSS aplicadas.

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 (link abre em nova janela).

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

Com o acréscimo das classes a marcação HTML será como mostrada a seguir.

<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>

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 (link abre em nova janela) mostrando os três links estilizados de maneira diferente.

Assim, concluímos que para estilizar links de maneira diferenciada em uma mesma página basta que se defina classes diferentes para os links e se estilize cada classe separadamente.

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.

Compartilhe essa matéria com seus amigos