Email clients ignoring internal style sheet

Question

Best practices in normal web development call for putting your styles between style tags or loading a style sheet; however, I've found out that several email clients will ignore any style tags and only execute inline styles (www.campaignmonitor.com). I can deal with that, but I'm not sure if CSS supports inline media queries. I would like my email to display a little different on the desktop. Is something similar to this supported?:

<div id="myDiv" style="@media screen and (max-width:480px;){ color:black; }"></div>

Answer 1

HTML emails are an entirely different beast. You need to code them like it is 1999. Use a very limited set of tags and make sure all or your styles are inline. Use tables for your layouts.

To make use of media queries you need to do both.

What I recommend doing is to first create your email with all inline styles. Then when you are happy with it you can add support for mobile.

To add support for mobile add the media queries to the head tag and use !important to override any inline styles.

Here is an example: Optimizing for mobile email

Here is a helpful chart that details which css support for email clients. http://www.campaignmonitor.com/css/