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.

Note that the resulting links all appear in blue text to show I have not clicked on them yet.

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 first two links now appear in purple text to show that I’ve visited those links already.

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 blue text is underlined when the mouse is hovering over the link.

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!