CSS: Links
Links can styled by ID or class (an ID can only called on once whereas a class can be called on many times). The styling is generally used to present a sense of interactivity to the end-user. Links have four states:
- link (unvisited)
- visited
- hover (mouse over)
- active (selected)
The unvisited and visited links are self-explanatory. The hover link is how the link appears when the mouse cursor is placed over it.
Active links vs visited links
Active links are links that have just been clicked. It’s fairly redundant considering that the target us usually loaded as soon as the linked is clicked so you may not get to see it’s styling for the active state. Furthermore, when the visitor returns to your site the active link will become a visited link so again, you won’t get to see it’s styling.
Styling links using a class
a.somenav:link {color: red; text-decoration:none;} /* unvisited link */
a.somenav:visited {color: purple; text-decoration:none;} /* visited link */
a.somenav:hover {color: red; text-decoration:underline;} /* mouse over link */
a.somenav:active {color: blue; text-decoration:underline;} /* selected link */
Styling links using an ID
#somenav a:link {color: purple; text-decoration:none;} /* unvisited link */#somenav a:visited {color: purple; text-decoration:none;} /* visited link */#somenav a:hover {color: red; text-decoration:underline;} /* mouse over link */#somenave a:active {color: blue; text-decoration:underline;} /* selected link */
