CSS Tutorial
CSS Links
HTML Links can be styled using all of the CSS properties we have been learning, but still, there are some ways you can style a link depending on what state they are in.
These states are four (4) in number and are derived by the pseudo-class.
You will learn about the pseudo-class in our next lessons.
These are the four (4) link states
- a:link - An unvisited link.
- a:hover - A link the user has visited.
- a:visited - A link when the user mouses over it.
- a:active - A link during the time a user clicks it.
See Examples
/* unvisited link */
a:link {
color: #0000FF;
}
/* moused over link */
a:hover {
color: #009FFF;
}
/* visited link */
a:visited {
color: #009F00;
}
/* clicked link */
a:active {
color: #0000FF;
}
a
Things To Note
- a:hover
MUST come after a:link
and a:visited
.
- a:active
MUST come after a:hover
.
Common Ways of Styling Links
Without using the pseudo-class procedure, links are often styled in some common ways:
Using Text Decoration
The text-decoration
property is mostly used to remove underlines from links:
See Examples
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
What You Should Know at the End of This Lesson
- You should be able to tell briefly what CSS Links is all about.
- You should be able to identify the four (4) states of styling links.
- You should be able to style a link using the common ways.