Styling Links with CSS
You can style links by applying styles to a
elements.
a
elements have five states that you can target with your styles:
- link
- visited
- focus
- hover
- active
The order of these states in a stylesheet is very important. These states are additive, so even though a link is visited, the link style still applies to it. So the last one will overwrite the previous one. A good mnemonic to remember is LoVe HAte for link, visited, hover, active. In the middle is focus.
You can style these states with pseudoclasses:
a:link,
a:visited {
color: red;
}
The link
state is the default one. Often the visited
state will be the same. It makes sense to have a different visited state when you list a lot of external sites, like in the case of Google or Wikipedia.
The focus state is applied when you tab through a website. It is often the same as the hover state, but it can be different.
The hover
state is applied when you hover over a link. The active
state is triggered when you click with your mouse (hold it down to see it working).
There is another way to style links. You can first give a general style on the a
selector. This would overwrite all states, and you can then modify the states as you need them.
a {
color: red;
}
a:visited {
color: white;
}