outlook.com how to target css at a specific class

outlook css support
outlook 2016 css support

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?

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

Target Outlook.com using the [owa] Element, Outlook.com prefixes all styles with their own. This means by placing the [owa] element before each class or id within your CSS, these will only be affected in� Hi Smit Shah, You can target Outlook.com by using a CSS element called [owa], and placing this before each class or id within your emails CSS, for the content you only want to be shown in Outlook.com

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 conditional CSS, MSO tags can also be used to add styles targeting Outlook (Outlook supports CSS in the <head> ):. <!--[if mso]> <style> .example-class { /* Outlook-specific CSS� The .ie class (or a version specific class) can then be used to prefix a CSS selector in your main stylesheet. The result is a rule that will only be matched in Internet Explorer. The result is a rule that will only be matched in Internet Explorer.

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

See this thread for details of an alternate approach.

Target Outlook.com using the [owa] Element does not work > Litmus, Hi, Could it be possible that outlook.com can no longer be accessed targeting with this hack? <style type="text/css"> [owa] .anyclass { color:� Outlook conditional CSS. Windows Outlook 2003 and above use Microsoft Word as a rendering engine, which can lead to some weird rendering issues. Outlook conditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook.

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>

What you need to know about the new Outlook.com, Last month, Microsoft specified it is currently rolling out this new… For example , some CSS rules targeting h2 or h3 tags added The old Outlook.com used to prefix CSS class names by “.ecx” and by the class “. Outlook Version Numbers. Using Microsoft Office version numbers allows you to target specific Outlook clients. In the example above, ‘mso 9’ is Office 2000, which means you’re targeting Outlook 2000. Other version numbers allow you to target other clients, meaning you can build stylesheets tailored to each version of Outlook.

Fixing bugs with Outlook specific CSS, The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment. Note the ! important declaration which is needed to override inline styles. The stylesheet will be parsed by the Word-based versions of Outlook. Perhaps coming up with a set of page layouts that represent the normal range of options for them with each Web Part Zone having a specific set of CSS applied to it is the right middle ground. Rather than trying to solve the "we might want to do anthing" problem, see if you can identify the most common patterns and solve those.

Outlook Conditional CSS, if gte mso 9]> <style type="text/css"> /* Your Outlook-specific CSS goes here. */ </ style> <![endif]-->. expand. It's the same thing you'd use to target Internet� URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

How to Code HTML Emails that Look Good in Outlook.com, Learn how to code HTML email for Outlook.com and how to get around some of the most common Outlook.com bugs. so you know what type of code and workarounds you may need. Media queries are out (for now); You can target Outlook.com First, the repeating background CSS is not supported:d Expand your Outlook. We've developed a suite of premium Outlook features for people with advanced email and calendar needs. A Microsoft 365 subscription offers an ad-free interface, custom domains, enhanced security options, the full desktop version of Office, and 1 TB of cloud storage.

Comments
  • The conditional comment only works for Outlook emails, not outlook.com.
  • 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 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.