CSS Links
Links can be styled with any CSS property (e.g., color, font-family, and background-color).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
a:link—a normal, unvisited link,a:visited—a link the user has visited,a:hover—a link when the user mouses over it, anda:active—a link the moment it is clicked.
For example,
a:link { color:#FF0000; } /* unvisited link */
a:visited { color:#00FF00; } /* visited link */
a:hover { color:#FF00FF; } /* mouse over link */
a:active { color:#0000FF; } /* selected link */
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited and
a:active MUST come after a:hover.
Common Link Styles
In the example above the link changes color depending on what state it is in.
Two of the other common ways to style links are
- Text decoration:
This property is mostly used to remove underlines from links, for example,
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:active { text-decoration:underline; }
- Background color:
The property specifies the background color for links, for example,
a:visited { background-color:#FFFF85; }
a:hover { background-color:#FF704D; }
a:active { background-color:#FF704D; }
Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web: