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.