Link Colors in HTML
Links in HTML (<a> tag) have different colors depending on their state. CSS controls these states using pseudo-classes.
By default, browsers style links differently:
- Unvisited link → Blue
- Visited link → Purple
- Active link (when clicked) → Red
1. Unvisited Link (a:link)
-
Default state when the link has not been clicked yet.
-
Usually shown in blue color.
Example :
a:link {
color: blue;
}
2. Visited Link (a:visited)
-
When a link has already been clicked and visited.
-
Usually shown in purple color.
Example :
a:visited {
color: purple;
}
3. Hover Link (a:hover)
-
When the user moves the mouse pointer over the link.
-
Used to provide interactivity & better UX.
Example :
a:hover {
color: red;
text-decoration: underline;
}
4. Active Link (a:active)
-
When the link is in the process of being clicked.
-
Usually shown in orange or red color.
Example :
a:active {
color: orange;
}
Complete Example :
<!DOCTYPE html>
<html>
<head>
<title>Link Colors Example</title>
<style>
/* Unvisited link */
a:link {
color: blue;
}
/* Visited link */
a:visited {
color: purple;
}
/* Mouse hover */
a:hover {
color: red;
text-decoration: underline;
}
/* Active (when clicked) */
a:active {
color: orange;
}
</style>
</head>
<body>
<h2>Link Colors Demo</h2>
<p>
<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a><br>
<a href="https://www.google.com" target="_blank">Visit Google</a>
</p>
</body>
</html>
Output :
