Multiple css classes not working

Question

I am converting a docx to html format (using apache poi) and sending it as email.

A snippet of generated html looks something like this

<html>
<head>
 ....
 <style>

  span.Normal{
   font-family: 'Arial';font-size: 9.0pt;
  }

  span.Title{
   font-family: 'Cambria';font-size: 28.0pt;color: #000000;
  }

  span.MySubtitle{
   font-family: 'Arial';font-size: 18.0pt;color: #000000;
  }

  span.MyTitle{
   font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
  }

 ...
 </style>
</head>
<body> 
....

 <p class="Normal Title MyTitle">
  <span id="_GoBack">
   <span class="Normal Title MyTitle">Welcome Message</span>
   <span class="Normal Title MyTitle"> </span>
   <span class="Normal Title MyTitle">Username</span>
  </p>
  <p class="Normal Title MySubtitle">
   <span class="Normal Title MySubtitle">Issues and Solutions</span>
  </p>

 ...
</body>
</html>

The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.

Does Outlook support multiple css? Is there a way I can control multiple css generation.

Your question is probably related to [CSS Styling won't work in outlook 2010?](http://stackoverflow.com/questions/8310609/css-styling-wont-work-in-outlook-2010). To help with debugging, you could also try changing the contents of the various classes. Maybe Outlook _can_ support multiple classes, but your specific styles don't work. For example, try separate classes for `font-family`, `font-weight`, `color`, etc. — Frank Tan, Aug 30 '16 at 20:04
[Here](https://www.campaignmonitor.com/css/) is a great tool for determining HTML and CSS compatibility with several email clients. — Caleb Anthony, Aug 30 '16 at 20:33

score 4 · Answer 1 · answered Jul 13 '22 at 14:49

I've just discovered this problem myself.

It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.

Stylesheet:

<!--[if gte mso 9]>
<style type="text/css">
.red {
    color: red;
}
.large {
    font-size: 72px;
}
</style>
<![endif]-->

Markup:

<div class="red">
    THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
    THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
    THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
    THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>

Result:

As far as I see, all versions of Outlook are affected. Including the newer ones.

I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:

https://github.com/hteumeuleu/email-bugs/issues/117

I cannot believe this crap... thank you! That solved my issue. — LanFeusT, Jun 13 '23 at 18:37

score 1 · Answer 2 · answered Sep 05 '16 at 16:05

As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.

The classic yet efficient solution for mail is rely in the table tag.

You can find a good example here

Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.

Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.

score 0 · Answer 3 · answered Aug 31 '16 at 21:25

Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.

I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.

Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.

My suggestions are to:

Use semantic markup
Discard classes and use semantic selectors
Use the DRY principle (don't repeat yourself)
list rules with a logical order, such as starting from the largest and ending at the smallest.

Here's some refactored code using your styling rules and demonstrating how to use each element.

<html>
 <head>
  <style>
   body {
    color: #000000;
   }
   h1,
   h2,
   p { 
    font-family: 'Arial';
   }
   h3 {
    font-family: 'Cambria';
   }
   h1 {
    font-size: 28pt;
   }
   h2 {
    font-size: 22pt;
   }
   h3 {
    font-size: 18pt;
   }
   p {
    font-size: 9pt;
   }
  </style>
 </head>
 <body> 
  <h1>Heading 1</h1>
  <h2>
   Heading 2
  </h2>
  <h3>
   Heading 3
  </h3>
  <p>
   This is paragraph text.
  </p>
 </body>
</html>

This html is auto generated by apache-poi. I don't have any control over it. The three dots represent some more code. — Fayaz, Sep 18 '16 at 13:32

Multiple css classes not working

3 Answers3