Os efeitos em links são conseguidos declarando-se as regras para as pseudo classes do elemento a,
que é o elemento que cria o link.
Existem quatro pseudo classes para os links:
Na folha de estilo ficaria assim:
a {
text-decoration:none;/*remove toda decoração do link*/
color:#000;
background-color:#DDDDDD; /*cor de fundo do link*/
border:1px solid black; /* preto*/
width:150px; /*largura do box do link*/
display:block; /*para conseguir aplicar uma largura em um elemento inline, deve-se transformá-lo em bloco*/
padding:3px 5px; /*espaçamento entre o link e a borda (palavra e a borda)*/
}
Na folha de estilo ficaria assim:
a:hover{
text-decoration:underline; /*link sublinhado*/
text-decoration:none; /*remove toda decoração do link*/
}
a:hover{
color:#DDDDDD;/*a cor que era preta passou a ser cinza*/
background-color:#000;/*a cor que era cinza passou a ser preta*/
}
Observação: A estilização feita foi usando o efeito cascata.