HTML Links - Different Colors

❮ Previous Next ❯

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.

HTML Link Colors

By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the link state colors, by using CSS:

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Try it Yourself »

Link Buttons

A link can also be styled as a button, by using CSS:

This is a link

Example

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
Try it Yourself »

To learn more about CSS, go to our CSS Tutorial.

HTML Link Tags

Tag Description
<a>Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Exercises

Test Yourself With Exercises

Exercise:

Use CSS to remove the underline from the link.

<a href="html_images.asp" style="">HTML Images</a>

Start the Exercise

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.