outlook.com how to target css at a specific class

StackOverflow https://stackoverflow.com/questions/17623120

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?

Was it helpful?

Solution

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]-->

OTHER TIPS

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/

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

See this thread for details of an alternate approach.

The mso tags doesn't work anymore apparently, try this css hack instead

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
   /* This will be specific to outlook.com */
    span[class~=x_outlook] {  
      color: #26d0ae;
    }
    /* This styling will work on the mobile apps of Microsoft Outlook (both ios and android) */
    body[data-outlook-cycle] .outlook {
      color: #26d0ae;
    }
</style>
</head>

<body class="body">
  Neutral
  <span class="outlook">
    This span is a chameleon
  </span>
</body>
</html>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top