Our Blog

We can't shut up.

You are here: Home Our Blog Email Newsletter Troubleshooting: Volume Two
June 9 2010

Email Newsletter Troubleshooting: Volume Two

This is the second installment of tricks and tips for troubleshooting HTML problems in an email newsletter template. Learn how to properly set the link color.

Link Color

Links are a funny animal when it comes to color. By default, links are the familiar electric blue we've all become accustomed to. However, it's often desirable to change the color of links to conform to your organization's color palette.

Look at this example. In this particular case, you can't even read the links because the color contrast makes the letters almost illegible.

link-color-bad.jpg

Let's look at the underlying HTML. Notice the code for this example puts the font color tag outside of the actual anchor tag:

<font color="#ffffff"><a href="mailto:info@oursite.org">info@oursite.org</a></font>

Because the anchor tag is "closer" to the actual content it takes precedence over the styling and the link is rendered as the default blue link color.

Instead, make sure that your HTML code is formatted such that the color information resides inside the anchor tag like this:

<a href="mailto:info@oursite.org"><font color="#ffffff">info@oursite.org</font></a>

With the anchor and <font> tag nested properly, we get the following result:

link-color-good.jpg

For those of you groaning about using <font>, I could have also done the same thing with a <span> tag with inline CSS color.

You may also use inline styling to determine the color of a link in your email template. An example would look like this:

<a href="mailto:info@oursite.org" style="color: #ffffff;">info@oursite.org</a>

Most mass email platform's visual editors will use a tag instead of doing inline CSS. When that's the case, it's the order of operations that will determine where the tag is applied to relation to the anchor tag. You may have to experiment a little to get the right sequence.

Setting the Link Color Globally

You might be thinking that there must be an easier way that having to individually code each link with a color. And you are correct . . . at least partially.

For the most part, you should never use an embedded stylesheet in your email template because many email clients will simply ignore it. However, if you can live with the default blue link color appearing in some cases, you can set the color globally. Here's how:

In the <head> block of your template include an embedded style like this:

<style>
<--
a {color: #006699;
   }
-->
</style>

If you want to get a little fancier, add an underline when you mouseover a link:

<style>
<--
a {color: #006699;
        text-decoration: none;
    }
a:hover {text-decoration: underline;
    }
-->
</style>

 This is the second installment of tricks and tips for troubleshooting HTML problems in an email newsletter template. Click here to read Volume One.