Como personalizar links no HTML com CSS

Oi, gente! Tudo bem com vocês? Antes de qualquer coisa só queria avisar que a série de posts ensinando a criar um layout no WordPress foi adiada porque o primeiro post acabou sendo excluído sem querer por causa de problemas técnicos aqui no CDB. Eu irei voltar com a série – o quanto antes -, mas acabei não tendo tempo pra refazer o primeiro post.

O tutorial de hoje é ensinando como personalizar links no HTML com CSS. Eu sei que é um tutorial bem simples, mas vale tanto pra Blogger quanto pra WordPress, e para quem está começando vale a pena ver as possibilidades que o CSS nos oferece <3

1. Peronalizando todos os links do seu blog

Quando criamos um blog e fazemos uma postagem com links, normalmente esses links veem com uma personalização padrão. Para fazer com que esse padrão combine com o nosso layout, precisamos fazer mudanças no css. Para fazer isso, basta adicionar o seguinte código no seu css:

a { personalização }
a:hover { personalização } /* Quando passa o mouse em cima */

Onde está escrito personalização você deverá substituir pelo o que ensinarei mais adiante (no item 3).

2. Personalizando links específicos

Vamos supor que vocês já personalizaram todos os links do blog, mas querem que os links que aparecem na sidebar (lateral) do blog sejam diferentes do restante, como vocês fazem isso? Simples. Basta procurar a classe do css correspondente à lateral e criar uma nova com o mesmo nome e um a (e a:hover} na frente. Veja o exemplo:

#sidebar { personalização da classe sidebar }
#sidebar a { personalização dos links }
#sidebar a:hover { personalização dos links }

3. Como fazer a personalização

Agora a melhor parte, vamos aprender como deixar os links do jeitinho que a gente quer. Tudo o que estiver em vermelho, vocês devem substituir na classe dos links, onde está escrito personalização.
ADICIONANDO COR NO TEXTO
color: #000;
Substituam o #000 pela cor que quiserem, caso não saibam como encontrar o código das cores, cliquem aqui ou procurem no Google por cores html.
REMOVENDO SUBLINHADO DO LINK
text-decoration: none;
Geralmente os links são padronizados com sublinhados embaixo do texto (quando passamos o mouse em cima), esse código remove esses sublinhado, porém, vocês podem mudar o none por outra personalização que queiram.

ADICIOANDO COR DE FUNDO
 
background: #000

Substituam o #000 pela cor que quiserem, caso não saibam como encontrar o código das cores, cliquem aqui ou procurem no Google por cores html.

ADICIONANDO ESPAÇO ENTRE O TEXTO E A COR DO FUNDO
 
padding: 5px;

Esse código faz com que a cor de fundo não fique grudadinha no texto, ele meio que cria uma borda em volta do texto.

ADICIONANDO BORDA
 
border: 1px solid #fff;

Você usa border caso queria uma borda em todo o contorno do link. Se quiser apenas embaixo: substitua border por border-bottom, se quiser no topo: border-top, se quiser no lado direito: border-right, se quiser no lado esquerdo: border-left. O 1px é a espessura da borda, o solid é o formato da borda, ou seja, neste caso ela será uma linha; se quiser tracejado substitua por dashed ou por dotted caso queira pontilhado. E o #fff é a cor que vocês já sabem como alterar!

Exemplo de um código final

a {color: #862d78; background: #eee; border-bottom: 1px solid #e4e4e4;}

O CSS tem muitas opções de personalização, principalmente o CSS3. Vocês podem googlar e usar o que encontrarem para personalizarem seus próprios links. Como vocês perceberam, é bem simples. Se tiverem algum exemplo que queiram saber como foi feito, deixem nos comentários que se eu souber eu ajudo!