Apesar de link ser um texto e sua personalização se enquadrar na aula anterior, resolvemos fazer uma aula específica de como personalizar links com CSS.

Links podem ser personalizados com as propriedades de textos que vimos na aula anterior, porém existem algumas particularidades que nos fizeram criar uma aula separada para explicar melhor.

Quando criamos um link no HTML é possível observar que ele já vem com uma aparência inicial personalizada: A sua cor geralmente é azul e ele vem sublinhado (text-decoration).

Podemos facilmente remover essas características com as propriedades que estudamos na aula anterior, usando color para trocar a cor de texto, e text-decoration: none para retirarmos o sublinhado.

Ao passar o mouse

Um detalhe importante ao falar de links é a possibilidade de mudar sua aparência ao passar o mouse por cima. Essa mudança é possível se usarmos uma pseudo-classe.

O que é uma pseudo-classe? É uma palavra-chave que podemos adicionar nos seletores para indicar uma mudança de estado do elemento.

Uma mudança de estado possível de um elemento é ao passar o mouse sobre ele. Essa mudança de estado é chamada no CSS de :hover.

Observe o exemplo abaixo:

Nesse exemplo podemos ver que primeiramente personalizamos os links com o seletor “a” colocando a cor verde e retirando o sublinhado.

Depois temos o “a:hover” que vai indicar a aparência do link justamente quando ele mudar de estado. Quando o usuário passar o mouse sobre o link ele vai mudar sua aparência para as descritas em “a:hover”.

Dessa forma quando passarmos o mouse sobre os links, eles terão a cor azul e serão mostrados com sublinhados, graças ao que escrevemos em “a:hover”.

Agora que já vimos como personalizar links com CSS, vamos partir para a próxima: