If you have sent quite a few email campaigns and tested thoroughly, you will soon notice that Gmail has quite a few tricks to play on how your email will render. Chief amongst these is how it styles your links. Gmail is growing, it’s nearly as big as Hotmail and in some industries completely wipes them out. So, it’s important to get the link styling right, particularly because when you get it wrong it shows up as bright blue, which can often be quite jarring.

<head>

<style type="text/css">
a:link {color:#fd7100; text-decoration:none;} /* unvisited link */
a:visited {color:#fd7100; text-decoration:none;} /* visited link */
a:hover {color:#fd7100; text-decoration:none;} /* mouse over link */
a:active {color:#fd7100; text-decoration:none;} /* selected link */
</style>

</head>

<body>
<a href="http://www.mailingmanager.co.uk">Link 1</a>

<a style="color:#000000;" href="http://www.mailingmanager.co.uk">Link 2</a>

<a style="color:#000001;" href="http://www.mailingmanager.co.uk">Link 3</a>

<a href="http://www.mailingmanager.co.uk"><font color="#fd7100">Link 4</font></a>

<a style="color:#fd7100; text-decoration:none;" href="http://www.mailingmanager.co.uk">Link 5</a>

</body>
</html>

In the example above we have a few different methods of coloring a link in Gmail.

Link 1
This link uses CSS code in the head of the email to determine the colour and styling of the link, this method just doesn’t work. Any CSS you use should ideally be inline.

Link 2

<a style="color:#000000;" href="http://www.mailingmanager.co.uk">Link 2</a>

This link is using inline CSS but shows up a very annoying problem with Gmail.  Even when using the correct method if you style your link with the hex reference #000000, i.e. black. Gmail chooses to ignore this and makes it blue. Only for this colour though. The fix is in Link 3

Link 3

<a style="color:#000001;" href="http://www.mailingmanager.co.uk">Link 3</a>

The easiest of all the email coding fixes, use #000001 instead of #000000 when styling links to be black in Gmail. The difference in colour is not visible but it does enough to get round Gmail’s crazy ways.

Link 4

<a href="http://www.mailingmanager.co.uk"><font color="#fd7100">Link 4</font></a>

Funnily enough, using old school HTML code works fine, your link will be the right colour, with one drawback, it’s not very easy to remove the underline.

Link 5

<a style="color:#fd7100; text-decoration:none;" href="http://www.mailingmanager.co.uk">Link 5</a>

Right here we are, this is the way to do it, if you want a link to be coloured exactly to your choosing and with no underline, you’ll need to add inline CSS property to the ‘a href’ tag.

About