Outlook software strips out the inline CSS in emails

Question

I have an email like the following. The problem is, it works fine on Gmail, but on outlook, all CSS inline statements don\'t work.

One example is:

Answer 1

Outlook doesn't ignore inline styles. It doesn't understand quite a few CSS properties though. Things which today we take for granted: floats, margins, padding. Campaign Monitor have a very good table of which things will work in which email clients.

You can almost always get around this with lots and lots of nested tables. It's ugly but it's cross-platform and that's all that matters.

Sometimes in email marketing you have to accept that it's not going to look 100% identical in every email client and that's okay. As long as it looks good in every client, it doesn't matter if there is 2px extra spacing here and there.

Email marketing is often about progressive enhancement. You do the best you can for the people using Lotus Notes and other old clients and you add the finishing touches for the people using Gmail on Chrome. For example, even though Outlook doesn't support media queries, you can still (and probably should) use them because other clients will. The nice thing about that is that if an email client supports media queries, chances are they also support more modern things like floats, so you're able to use properties like that within the media queries if you want.

CSS-tricks have a fairly good article which discusses the general sort of methodology you should follow.

---

Writing HTML emails is largely a matter experience. Do it enough and you'll figure out the different ways you have to do things compared to writing it for the web. I highly recommend testing anything you do through Litmus, especially if you're producing work for a client. It will show you how your email renders in almost any email client. It's a subscription service - and an expensive one at that - but there really isn't any comparable free service.

Answer 2

Outlook uses a different way of executing stylesheet. Is not SMTP settings or email settings. It depends on how the email service like Gmail, Outlook and Yahoo displays the CSS. How Outlook styles = How IE styles.

I've used Mailchimp did this for every p element I used and it does not looks exactly the same in Outlook and Gmail but is the closest I can get.

<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;">

The guide I used for Outlook is this. Do note that you have to join their community ( free) to get the Outlook guide, which I think is worth it and save you the trouble. https://www.emailonacid.com/resources

The previous link should explain to you but if you want more information, you can always look the below two links that I used as well.

For Outlook/Hotmail, they usually have a mso syntax in front of the styling like http://templates.mailchimp.com/development/css/outlook-conditional-css/

For certain elements that email provider use, you can refer here. https://www.campaignmonitor.com/css/

Spend some time creating a email template that works for all email services and modify it next time to suit your needs saves much more time and effort than starting from scratch.