HTML Links - Different Colors
An HTML link is displayed in a different color depending on whether it has been visited, unvisited or active.
By default, a link will appear like this (in all browser):
- 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;
}
a:visited {
color: pink;
}
a:active {
color: yellow;
}
a {
text-decoration: none;
}
a:hover {
color: red;
}
</style>
a:link {
color: green;
}
a:visited {
color: pink;
}
a:active {
color: yellow;
}
a {
text-decoration: none;
}
a:hover {
color: red;
}
</style>
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>
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>