Inline styles for a:link, a:hover etc in an email newsletter

Help! Need to push out this email campaign now. CSS not supported in some email clients, so I need to set inline styles for the text links. Can’t seem to get it right. CSS below. My attempt at inline css inside the container div.

<Style a:link=“color:#33348e; text-decoration: none;” a:visited=“color:#33348e; text-decoration: none;” a:hover=“color:#33348e; text-decoration: none;” a:active=“color:#7476b4; text-decoration: underline;”>

Not working. I am new at this. I love it. Help me out?


Well, for one thing, that’s not really inline CSS. Inline CSS is when you do something like this:

<a href="#" style="color: #555; background: #ffc;">example</a>

For another, you can’t use pseudoclasses like :hover in inline CSS.

When you use a style element, they usually look more like this:

<style type="text/css" media="screen">
a:link { color:#33348e; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#33348e; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }

The GOOD news is that you can definitely use CSS in the head or body of your HTML email with fairly broad support. According to Campaign Monitor’s email CSS compatibility guide, you can define a:hover using declarations much like how I’ve done it above, and the only major clients that won’t get it are Gmail, Outlook 07, and Notes 6/7.

Email HTML is HARD. It is a pain and a nuisance to get everything right in every client, and you simply do not have the same control over the presentation as you do with a web browser. If you think browser quirks and differences are hard, you ain’t seen nothin’ yet. It is definitely one of those situations where you just have to be content with a slightly different look between clients.

I’d suggest you have a good close look at the guide linked on that CM page so that you have the goods on what’s available and with which techniques. It’s a great little cheat sheet. (No, I don’t work for Campaign Monitor, i work here :wink: )

Code Sponge, you can either do “true” inline styles as Raena suggests or you can stick to the old HTML tags (which are not CSS and therefore not stripped out).

The <style> declaration is made for the document HEAD and so is not my choice for email. I personally use inline styles for everything, it’s not as clean as for the browser. Looks like:

<p style="color: #000000; font-size: 11px; font-family: Arial, Helvetica, sans-serif;">
Email paragraph about something 
<span style="font-weight: bold;">important</span>.</p>


You might take a look at this article that shows the ins and outs for making a solid html e-mail.

…And one from SitePoint :slight_smile:

Missed that one buddy :smiley:

It’s ok :). There are also many threads on it here on Sitepoint if the OP wants to google.

Yeah. But i belive the conclusion is: do it with tables for a reliable result :stuck_out_tongue:

Thanks to all. The articles are very informative. I’ll reference them on my next project. Hope to tackle a full css website soon! Like Luki_be, learning each day.