I don’t need to get into the significance of links. If you found this article, then you understand the importance and general use case of links. So enough about that…

But do you know all the different ways to style a link? There’s a lot. Some of them may seem redundant. And they are, unless you know of the three, yes three, base states of a link.

It’s common knowledge that links have two basic states. They’re either unvisited or visited.

Now one would think that all you would need style these two states would be:

a {
  /* ... */
}

a:visited {
  /* ... */
}

The a{} selector on it’s own being the unvisited link, and a:visited{} obviously being the visited link styling.

That’s where common sense takes a swift kick to the head and you’d be wrong. Oh so wrong.

There is a second pseudo selector used to style links, and that is :link.

So really links are meant to be styled like so:

a {
  /* ... */
}

a:link {
  /* ... */
}

a:visited {
  /* ... */
}

Now you may be asking but if a:link{} styles unvisited links and a:visited{} styles visited links, then what does a{} by itself style?

Oh you. Oh you and your questions so soundly based in logic…

Here’s where we back up a minute and talk about the third state of link.

In the HTML5 spec, hyperlink elements no longer require the href attribute.

That’s right, the href attribute, the thing that makes a link a link is not required.

So, what is a link that is not a link?

It’s called a Placeholder Link of course!?

There are some actual use cases for having a hyperlink element without a href. They’re mostly JavaScript examples where having href="#" isn’t ideal. I don’t particularly agree with that rational, but I won’t get into that in this article. I’m already diverging way off course. This is supposed to be about CSS!

The most legitimate example that has a sliver of rational behind it, is using empty hyperlinks in a navigation to designate the current page of a website.

So in the example of a navigation consisting of Home, About Us, and Contact, where the active page is Home, then the case could be made that Home doesn’t need the href, as that’s the current page.

I said that was the most legitimate example I could think of. I never said it was a good one. I’d rather people use aria-current="page" on the currently active link, as that will make a “current” announcement to screen readers, providing parity for the visual styling a current link often receives.

Back to the CSS

So keeping all three base states of a link in mind, our CSS should look like so:

a {
  font-size: 16px;
}

a:link {
  color: #00c;
}

a:visited {
  color: #70c;
}

In the above example, I’m giving a{} a font size that I want applied to all hyperlinks. Where a:link{} and a:visited are variations on the blue and purple default colors for hyperlinks.

By default, a hyperlink without the href attribute will inherit the text color of it’s parent element and the underline will be removed.

Wasn’t that fun?

You likely won’t, nor shouldn’t be putting links on your page without href’s. So in a normal situation where all <a> elements have an href, or at the very least are coded like <a href="#">, then do you actually need to code all three states of a hyperlink?

No you don’t. Or rather, you don’t need both a:link{} and a:visited{}.

For example, if you style your hyperlinks like this:

a {
  color: #f00;
}

a:visited {
  color: #b00;
}

Then the styling for a{} will be applied to unvisited links, while a:visited will style visited links. Pretty straight forward. I’d recommend this approach.

But you could also do the following:

a {
  color: #b00;
}

a:link {
  color: #f00;
}

In this example, visited links take on the styling of a{} while unvisited links are styled by a:link{}.

Regardless of which way you choose, (pick the first example), you don’t need to include all three in your CSS, if you are aiming to go for minimal declarations.

Updates

Updated: May 30th, 2014
Read the second part of this article to learn about other selectors you can use to style links.

Updated: July 24, 2018 Added a quick note about using aria-current="page.