Links
Links can be styled differently depending on what state they are in.
The four states of links are:
- a:link – a normal, unvisited link
- a:visited – a link the user has visited
- a:hover – a link when the user moves mouse over it
- a:active – a link the moment it is clicked
Sample code
<style>
a:link {color:red;}
a:visited {color:green;}
a:hover {color:hotpink;}
a:active {color:pink;}
</style>Example
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:orange;}
</style>
</head>
<body>
<h2>Example of Links</h2>
<a href="#">Click this Link </a>
</body>
</html>Remove Underline From The Link
The text-decoration property is mostly used to remove underline from links:
a:link {text-decoration:none;}
a:link {text-decoration:underline;}Use Background Color For The Link
The background-color property can be used to specify a background color for links:
a:link {background-color:orange;}
a:visited {background-color:maroon;}Example
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration:none; /*none, underline */
background-color:orange;
}
a:visited {
background-color:pink;
}
</style>
</head>
<body>
<h2>Example of Links </h2>
<a href="#">Click this Link </a>
</body>
</html>