outlook.com how to target css at a specific class

Question

I am designing an HTML email and I've made it look as good as I can in the email clients I have tested. I'm checking it now it Outlook.com and it has some issues (probably because they don't support margins) so I want to add some conditional styles for that client.

I know that Outlook.com wraps the email in a .ExternalClass class and prepends any custom classes with ecx so I tried something like

* {color:black;}
.ExternalClass * {color:red;}
.ExternalClass .ecxMyClass {color:blue;}
.ExternalClass .MyClass {color:green;}

just to see what selector would change the color of the text. I can't get any of them to work. Also I can't find where my styles are defined using an inspector like Firebug..

According to http://www.campaignmonitor.com/css/ Outlook.com should support style tags in the head or body and should be able to use classes as selectors.

Pretty much all of my styles are defined inline but I want to add padding to an element only in Outlook.com so I can't just add it inline. How do I target my custom class element in Outlook.com?

Answer 1

I'd strongly suggest you remove the margins from your email and use padding or empty (nbsp) table cells instead. Both are 100% supported, and as you're beginning to discover, jumping through hoops for certain clients can get really messy really quickly. Empty table cells with nbsp's in them are the best option as sometimes padding can get removed if your subscriber forwards the email to someone else.

That being said, if you want to target Outlook and not other clients, there are conditional mso tags that can be used.

Not sure if it works for Outlook.com, but give this a try:

<!--[if gte mso 15]><!-->
 // This will only be seen by Outlook 2013
<![endif]-->  

Answer 2

Outlook.com will eat conditional comments, so none of the above will work properly.

See this thread for details of an alternate approach.

Answer 3

CSS is a different ball game for Outlook. As I'm sure you've come across in coding for email, there are severe limitations and it's often better to scale back your expectations than try and make something work.

Here is a link to what CSS styles will work for various email clients http://www.campaignmonitor.com/css/