CSS Selectors Part 3
In my last post, I went over sibling and child selectors. In this resource, I’ll be going over styling links in CSS.
An Important Note
It is very important that you implement these styles in order. CSS implements it’s styles in the order that they’re written (with some exceptions). Your links won’t look the way you expect if you implement them out of order. A good way to remember the order is LoVe and HAte. Link, Visited, Hover, Active.
Link
When you include a link on your page, you want to make it clear to a user that it’s clickable.
When you search on Google, the result links appear in blue text.
The CSS might look something like this:
a:link {
color: blue;
}
Visited
If you click on a few results and then go back at the results page, Google will show you the pages you’ve already visited by displaying them with purple text.
The CSS might look something like this:
a:visited {
color: purple;
}
Hover
When you hover over a link on the search result page, the link is underlined.
The CSS might look something like this:
a:hover {
text-decoration: underline;
}
Active
You can also add a style to what your links look like when they’re clicked. Google doesn’t have a style for this, but that doesn’t mean you can’t!
To add a style to how your links look when they’re clicked:
a:active {
}
Again, don’t forget to implement these styles in order! See my note at the start of this post.
That’s all for now! In my next post, I’ll be covering adding and removing classes with Javascript!