Email Clients Ignoring Internal Style Sheet

Email clients ignoring internal style sheet

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/

Outlook is ignoring my email's CSS including font-family and background-color

I found the problem. Outlook was ignoring styles with an !important by them.

Why CSS is not working when sending HTML email?

Try using inline styles instead of an external stylesheet.
Like this:

<div style="color:green;" id="div"></div>

instead of something like this:

<style>
    #div {
        color:green;
    }
</style>
    
<div id="div"></div>

(Thanks Kelvis Miho for pointing this out)

Edit: I searched for @Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .

Edit: Joe edited his post to include the reference link.

Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.

You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.

Head styles in emails?

Best is for style to be written in the document and not linked. Linked resources are blocked by webmail clients like Outlook.com, Yahoo and Gmail

Use this guide for style support of email clients:
https://www.campaignmonitor.com/css/

send email with css style without using inline css

Some email clients ignore <style> tags in the head of an email, so that isn't a reliable option. Linked CSS files? Even more unreliable, stylesheets like that are ignored by a large portion of the email clients out there.

Frankly, the only reliable method of applying styling to your email, is to use inline CSS.

As a result, I'm afraid the answer to your question is that it's not possible to reliably style your emails, without the usage of inline CSS.

You'll have to figure out a way to use "normal" html elements to emulate the behavior of selectors like :before.

Outlook software strips out the inline CSS in emails

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.

is there a style reset for email clients?

The HTML Email Boilerplate is probably the closest thing you'll find. It's well commented and resets as much as is possible with html emails.

---

Related Topics