CSS HTML

How to get the blue color out of links using CSS

November 26, 2021

How to get the blue color out of links using CSS

In this article you will learn how to remove the blue color from links using CSS, in a very simple way and still changing the other states such as: visited and selected link.

get the blue color out of links cover

What’s up programmer, how are you? Let’s learn how to change the blue of the tag a!

The link, or tag a, is a very interesting element in HTML, as it has some states, unlike other elements.

Such as visited, which is when the link has already been visited by the user

The good news is that we can change all styles, be it the default as well as these states

Removing the blue color from links using CSS in practice

Let’s go to the practical example:

<!DOCTYPE html>
<html>
 <head>
  <title>Como tirar a cor azul de links ultilizando CSS</title>
  <meta charset="utf-8">
 </head>
 <body>
  <div>
  <!-- already visited -->
   <a href="#">Este link precisa mudar de cor</a>
  </div>
  <div>
  <!-- not visited -->
   <a href="http://www.teste.com.br">Este link precisa mudar de cor também</a>
  </div>
  <div>
  <!-- hover -->
   <a href="http://www.teste.com.br">Um outro link</a>
  </div>
</body>
</html>

Now look at the CSS required for each type of event/behavior change:

/* not accessed */
a {
 color: #000;
}

/* already visited */
a:visited {
 color: #555;
}

/* hover effect */
a:hover {
 color: #999;
}

/* selected link */
a:active {
 color: #333;
}

This way, we can access all events related to the tag, or links, from the HTML

See the browser result:

And so we change the link color in all its possible behavior! 

Another possibility is to remove the bottom border of the links, this is often done in projects as it is not useful, in most cases

For this you must use the text-decoration rule and the value none

a {
 text-decoration: none;
}

This way you take away the border, and not with the border rule (which is what many devs think)

Conclusion

In this article we learned how to uncolor links using CSS

We saw that the a tag, or link, has some states such as visited, hover and active

We learned how to change them all through CSS, which was the purpose of the topic, thus leaving our website customized for the client

And not with the default colors that HTML gives us

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x