Let's practice styling links in different states:
1
Style normal links
:link
Set color to blue and remove underline
2
Style visited links
:visited
Set color to purple for visited links
3
Style hover state
:hover
Change background color and add underline on hover
4
Style active state
:active
Make links slightly darker when clicked
lightbulb
Important Tip
Follow the LVHA order when styling links: :link, :visited, :hover, :active
/* CSS for link styling */
a:link {
color: #0052cc;
text-decoration: none;
}
a:visited {
color: #800080;
}
a:hover {
background-color: #e6f2ff;
text-decoration: underline;
}
a:active {
color: #003380;
}
a:link {
color: #0052cc;
text-decoration: none;
}
a:visited {
color: #800080;
}
a:hover {
background-color: #e6f2ff;
text-decoration: underline;
}
a:active {
color: #003380;
}