How to remove HTML purple link – An Easy Solution

When dealing with links on a webpage, ideally we want to avoid having them look unsightly. The color of a link should adhere to the existing color scheme on the website. Having a purple link will frequently contrast with the style of the section that it resides in.

With this in mind, how can you remove an HTML purple link? A purple link can be removed by overriding the default link styles in CSS. Specifically, a purple link indicates that the link has already been visited. So in order to change this style we must change the CSS :visited pseudo class.

So, in our CSS:

a:visited { 
 text-decoration: none; 
 color: orange; 
}

In this example:

  • text-decoration: none will remove the appearance of decorative lines of text.
  • We can then just set the color of the link to anything we see fit

We can also manipulate other links in the same way:

a:hover { text-decoration: none; color:yellow; }
a:focus { text-decoration: none; color:orange; }
a:active { text-decoration: none; color:teal; }

And there we have it, links are highly customizable to represent changes in state.

Proudly published with Gatsby