The two states people think about the most is link and hover since those are the most noticeable ones. Way to often I see people forgetting about the remaining ones or using the wrong order when styling. This is how you style links.
Every link has four five states.
a:link - a unvisited link
a:visited - a visited link
a:hover - when you mouse over a link
a:active - a selected link
In order to make the links work properly there are a few rules you have to follow.
a:hover must come after a:link and a:visited
a:active must come after a:hover
Thereās a fifth property that people seem to forget about thatās called focus. It works in the same way as hover, but it works for keyboard users. Most of the time it makes sense to have hover and focus to look the same.
a:link {
Ā Ā color: red;
}
a:visited {
Ā Ā color: green;
}
a:focus, a:hover {
Ā Ā color: #456456;
}
a:active {
Ā Ā color: #990000;
}
I always have a problem remembering the correct order, but there are a few tricks I know people use to help remember. Just thinkĀ LVFHA, or LoVe For HAte or if you are a Star Wars fanĀ āLord Vaderās Former Handle Anakinā or āLord Vader Hates Furry Animalsā. There are many tricks out there but the point remains, make it fun, it doesnāt have to be hard.
You can also target specific links. If you for example want to style the links in you navigation menu in a special way that differs from the other links on the page you can do that. Letās say you have links inside a div with the id of nav, you can target those links by adding the #nav in front of your link in css.
#nav a:link {
Ā color: black;
}
#nav a:visited {
Ā color: black;
}
#nav a:focus, #nav a:hover {
Ā color: orangered;
}
#nav a:active {
Ā color: black;
}
Visited Links are probably one of the most useful links you can use, especially on larger websites. Knowing that you have visited a page can be really helpful if you want to find it again. It can be something as easy as slightly changing the colors on the visited links or changing the text-decoration.
Tips: Remember that users scan the text and donāt read it. Make sure your links are obvious. Give them an other color or style them in a way that makes them stand out from the other text.
