HTML Link Colors

HTML Links – Different Colors: An HTML link is displayed in an alternate color depending on whether it has been visited, is unvisited, or is active.

What is a link?

It is a connection from one Web resource to another. A link has two ends, An anchor and direction. The connection begins at the “source” anchor and points to the “destination” anchor, which might be any Web resource like a picture, a video clip, a sound bite, a program, an HTML document, or an element inside an HTML document.

Of course, a link will seem this way (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. A functioning link will be yellow and underlined. Likewise, while 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>

Link Buttons

A link can likewise be styled as a catch, by using CSS:

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>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.