CSS Link Color

Its easy to spice up your website with some colorful links; in this tutorial we'll show you how to use Hex color codes and the CSS color property to give your anchor tags some much needed pop. And as a bonus we'll even show you how to use CSS to change the link color on hover. Let's get started, shall we?

CSS link color using an HTML tag

As far as CSS color is concerned, links, or <a> tags, behave in the same way as regular text. This means to change the color of a link all you need to do is use the CSS color property on the anchor tag with whatever color Hex you want, in the example below we use red. 

HTML

<head>
  <style>
    a { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a href="http://example.com/">A Red Link</a>
</body>
Demo on CodePen

For the examples in this tutorial we'll be using a Hex color code, but remember, there are many other possible CSS color values; check out our other CSS guide for an overview of all the various ways to use color in your stylesheets.

CSS link color using an ID

IDs are another way to style an <a> tag using CSS. You've probably seen them before, IDs are prefixed with a '#' sign in CSS and are generally meant to be used only once on any given webpage. 

HTML

<head>
  <style>
    #link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a id="link" href="http://example.com/">A Red Link</a>
</body>
Demo on CodePen

CSS link color using a class

Classes on the other hand, are intended to be reused throughout a webpage, and are much more common than IDs. CSS classes are prefixed with a '.' and multiple classes can even be attached to the same HTML element. Here we use a class with the same red Hex color code. 

HTML

<head>
  <style>
    .link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a class="link" href="http://example.com/one">A Red Link</a>
  <a class="link" href="http://example.com/two">Another Red Link</a>
</body>
Demo on CodePen

Changing link color on hover using CSS

You've probably noticed links changing color when you place your cursor on them, a stylish effect and one that's very easy to implement using CSS. To change the color of your link on hover, use the :hover pseudo property on the link's class and give it a different color. 

CSS

.link { color: #FF0000; } /* CSS link color (red) */
.link:hover { color: #00FF00; } /* CSS link hover (green) */
Demo on CodePen

The hover property can similarly be used on both IDs and elements themselves as demonstrated earlier in the tutorial. Color is just one of many properties you can change using :hover, try experimenting with underlines, border colors and backgrounds for fun.