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.

Gareth Dunne

Senior JavaScript Engineer and creator of JSdiaries. Passionate about the latest in web technologies and how it can provide value for my clients.