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>