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.
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
