Mudar a cor de links com css

Aprenda a mudar as cores padrão e formatação dos links links do seu site.

Publicado em 29/12/2019 10:49

Por padrão, todos os navegadores trazem suas formatações quando não escrevemos as nossas modificações, e na maioria esmagadora das vezes, essas formações são horríveis. Ai que entra o CSS e nossas habilidades ninjas de criar algo bonito visualmente.

Antes de iniciarmos, só quero dizer para você ficar atento ao padrão visual do seu site, ou seja, manter a estrutura de estilização e não ficar modificando as cores e efeitos em várias páginas, isso vai dificultar a navegação e entendimento dos seus usuários.

Na imagem abaixo vemos a estrutura padrão de exibição para os links, elas estão na cor azul e sublinhado. Quando clicamos, a cor do link muda para vermlho.

A exibição acima está utilizando a seguinte estrutura HTML.

Código 01:

<meta charset="utf-8">
<title>Links CSS</title>
 
 
<a href="#">Home</a>
<a href="#">Produtos</a>
<a href="#">Quem Somos</a>
<a href="#">Contato</a>

Vamos entender agora a estrutura básica do escopo do CSS, em seguida, vamos saber exatamente o que manipularemos.

Estrutura no escopo CSS, com seletores, bloco de instrução, propriedades e valores,

Toda estrutura CSS possui um seletor, ele pode ser um elemento HTML, classe ou um ID. Dentro do seletor fica nosso bloco de instrução, é ali que inserimos todas as nossas modificações para aquele elemento, podendo ser uma lista sem limites. Toda propriedade CSS pode conter um ou vários valores, então sempre consulte a documentação.

Confira abaixo o código comentado com as explicações, lembre-se de inseri-lo entre <style> e </style>,

Código 02:

 
 /* Links não visitados */
  a:link {
    transition: all 0.3s ease; /*Aplicamos um efeito de transição*/
    text-decoration: none; /*Removemos o sublinhado*/
    font-size: 1.3em; /*Alteramos o tamanho da fonte*/
    font-family: verdana; /*Mudamos a fonte padrão para verdana*/
    padding:10px; /*Adicionamos um espaçamento de 10px em TOP, BOTTOM, RIGHT e LEFT*/
    color: #00a2ff; /*Mudamos a cor para Azul*/
  }
 
  /* Quando já clicamos no link anteriormente */
  a:visited {
    color: #fa8900; /*Mudamos a cor para Laranja*/
  }
 
  /* Quando passamos o mouse sobre o link */
  a:hover {
    color: #d000ff; /*Mudamos a cor para Rosa*/
  }
 
  /* Quando clicamos no link */
  a:active {
    color: #27cc4d; /*Mudamos a cor para Verde*/
  }

Resultado final da nossa estilização.