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?

score 1 · Answer 1 · answered Jul 12 '13 at 21:27

1

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/

answered Jul 12 '13 at 21:27

AdamSchuld

833
9
15

Thanks but this doesn't answer my question. I know outlook.com supports the css property I'm trying to set but I don't know how to target it using css selectors. – Devin Crossman Jul 12 '13 at 23:29
@Devin In your original question you were using selectors that don't work in outlook.com- the point of the website was to show you that. When it comes to guaranteeing padding across all email clients, you are better off manually creating the padding using table cells instead of CSS properties. – AdamSchuld Jul 13 '13 at 06:26

score 1 · Accepted Answer · edited May 23 '17 at 12:23

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

The conditional comment only works for Outlook emails, not outlook.com. — josh1978, May 17 '16 at 22:37

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

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

See this thread for details of an alternate approach.

edited May 23 '17 at 11:44

Community

1
1

answered Mar 26 '14 at 17:33

Roman Edirisinghe

216
2
4

score 0 · Answer 4 · answered Nov 07 '19 at 10:06

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>

outlook.com how to target css at a specific class

4 Answers4

Linked