Outlook 2010/2013 ignoring header color

Recently I started using HTML E-mail Boilerplate Redux template from:


It's a good head start when coding an e-mail template, with solid overrides for quite some quircks of all the e-mail programs, but I got stuck with one particular issue for which I couldn't find any information online:

Outlook 2010 and Outlook 2013 are ignoring my heading colors when using different colors in the same template. At first I thought this would be the result of the global '!important' added for Outlook.com, but today I found out that Outlook is ignoring the (inline) css color altogether when there is no 'normal' color set beside the !important color.

Let me show you an example.
<style type="text/css">
h1, h2, h3, h4, h5, h6 { color:red !important; }
.header h1 { color: #ffffff !important; }

Now the header h1 color is completely ignored, all the headings are red. When removing the global style color, the header h1 becomes default black. When I remove the '!important' both the global and specific colors are correct. According to the redux template, it's an override for Outlook.com, but I got no styling issues there. I guess this issue is already resolved by Campaign Monitor when placing the styling inline.

When you find this issue, now you what to do!
(and it's also for my future reference :-) )

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free