Original image designed by Tatiana Bischak.

Links, a CSS/HTML Tip for Junior Web Designers and Devs.

“Stupid links!” 😁

Has something like the following happened to you?:

While implementing a design in HTML+CSS, you have for example a basic top navigation like this one:

Basic top navigation.

Then you click ONE link and Bam!… all the links change their color to this ugly purple 😒:

All links changed color after clicking just ONE of them.

I used to say: “Stupid links!”. Hahaha 😁

Tell me why all links changed color

There are two reasons this happened:

1. The visited links are using the default style from the browser’s (a.k.a. User Agent or UA) stylesheet. The default style for visited links is, well, purple.
   and…
2. Because is likely that all the links have the same anchor link (href="") in the HTML, thus, if you click ONE is just like clicking all of them, hence, the color changes on all the links.

I still don’t get it. Show me markup (HTML) and CSS please

Sure!

The HTML for the top nav could be something like this:

<nav class="top-nav">
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">Pricing</a>
    <a href="#">About Us</a>
    <a href="#">Contact Us</a>
</nav>

Which, as we saw before, without any styles except the ones from the UA, it looks like this in any browser:

Basic nav without any styles except from the UA. Nice blue links.

As you can see in the HTML above, all the links have what’s called a “dummy link”, which is a common practice during development. Using dummy links allows you to have links that look and behave just like they will once the site is in production, the only difference is that the dummy links obviously do not take you to another page.

The thing is that by clicking ONE link, then ALL links will change…

All links changed and look purple by default.

…Which in itself is not the problem, the problem is that we now have a purple color that is not something we want in our design!

EDIT — 9/27: Check out Taylor Hunt’s comment about using dummy links with <a href="//x.invalid"> : https://medium.com/@tigt/if-you-use-a-href-https-example-invalid-8379c598bb7d

EDIT — 9/29: Note for Windows users: I tested the <a href="//x.invalid"> in Chrome, Edge and Firefox on Windows and it didn’t seem to work, links would still resolve and the browser would mark them as visited. If you experience something different in Windows please let me know and I’ll update the article. Thanks.

How to fix the purple color then?

Easy.

All you need to do is create a CSS rule in which you style the:visited pseudo-class. Like this for example:

a:visited { color: orange; }

This means that we no longer have that ugly (but admittedly useful) purple:

No more ugly purple links!

One step further: Do the right thing

Now, while you’re at it, you should actually create CSS rules for all states of the links, which in CSS they’re called “pseudo-classes”†: :link , :visited, :hover, :active and :focus .

It would look something like this in CSS:

a:link { color: red; }
a:visited { color: orange; }
a:hover { background: red; color: white; }
a:active, 
a:focus { background: green; color: white; }

Note the :active and :focus pseudo-classes, it’s common to have them together in the same rule, but of course, you are more than welcome to style them individually if you want to. I personally always style them together.

Also, while you get more experienced I recommend you style the link states in the order you see above: :link , :visited, :hover, :active and :focus .

I want to see this thing in action dude!

Here you go! This is how our top nav would behave in the browser with the above classes:

Navigation in which all link states have been styled.

• The styling of the normal state of the links is just red, which is the :link pseudo-class.
• The visited state happens after we have clicked/tapped and let go of the link. The visited state triggers the :visited pseudo-class. This is when the visited links turn orange and not that ugly purple.
• The links turn red when hovering with the mouse, this action triggers the :hover pseudo-class.
• The active state is when we click/tap but have not let go of the link just yet, this action triggers the :active pseudo-class. Which in this case, is the same style as the :focus pseudo-class explained below.
• The links turn green when using TAB to cycle through them. Using TAB triggers the :focus pseudo-class.

Here’s a CodePen demo for easier HTML and CSS reference:

CodePen demo of the basic top nav with all links’ states styled.

That’s it!

Now go style your links and remember to account for all states, :link , :visited, :hover, :active and :focus .

If you liked this article, please Clap it! 👏 (man, that sounds SO weird, hahaha!)

Muchas Gracias! 🙏

I am a freelance Web Designer and I’m available to put my skills to work for you and with you.

Contact me and let’s get started →

†PS. Want more information about CSS Pseudo Classes and Pseudo Elements? Check out this article on Smashing Magazine: An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements

Credits

Light bulbs illustration by Tatiana Bischak. Thank you Tatiana for letting me use it in this article 👍.