How to change the colour of links

Links make the web go round and if you’re building a great website, you’ll have a lot of them.

Changing the colour of links is the prettiest way to style them and it’s easy to do.

First things first you need to understand the 4 different ‘states’ a link can be in:

  • a:link – untouched, this is how it first appears
  • a:visited – it’s been used! The user has previously clicked this link
  • a:hover – tease the link with a hover over, not been clicked
  • a:active – what happens as you click it (just before you’re swept away)

So now we use these in a CSS command like so:

a:link {
  color: #000000;

a:visited {
  color: #000000;

a:hover {
  color: #000000;

a:active {
  color: #000000;

You’ll just need to change the HEX codes to your colours of choice – and take note of the American spelling of ‘color’.

If you need a HEX code colour tool I recommend this one. It’s pretty sexy.

I also have a page on my favourite colour palettes if you’re looking for a quick and easy theme.



Web Designer / Graphic Designer based in London.
This site is my own personal reference to all things Wordpress and web design, which I hope will also help others.
Let me know if you have any questions!


Leave a Reply

Your email address will not be published. Required fields are marked *