CSS Link
Different links can have different styles.
Link Styles
Link styles can be set using any CSS properties (such as color, font, background, etc.).
Special links can have different styles depending on their state.
These four link states are:
a:link - Normal, unvisited link
a:visited - Link that the user has visited
a:hover - When the user's mouse is over the link
a:active - The moment the link is clicked
Example
a:link {color:#000000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Active link */
When setting styles for several link states, there are some order rules:
a:hover must come after a:link and a:visited
a:active must come after a:hover
Common Link Styles
Based on the example of link color changes, see it in different states.
Let's move on to some other common ways to style links:
Text Decoration
The text-decoration property is mainly used to remove underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
The background-color property specifies the background color of a link:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}