Building HTML emails, can I put styles in the header section or do I have to use inline styles?

Question

I have to build some email templates using basic HTML and CSS.

I have found this page which details which CSS styles are most supported in various email clients. I understand these will work as inline styles. However I'd like to put them in the head section of the email as it will be a bit cleaner, can I do that as well and will it be well supported? E.g.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
           /* CSS goes here */
        </style>
    </head>
    <body>
        Email goes here
    </body>
</html>

Many thanks!

possible duplicate of [can I put a tag within the body of an HTML file?](http://stackoverflow.com/questions/225828/can-i-put-a-style-style-tag-within-the-body-of-an-html-file) — icktoofay, Mar 12 '12 at 04:15
Your quickly going to find out that using styles in html emails is going to cause headaches... or your not supporting outlook. — Ben Rowe, Mar 12 '12 at 04:19

score 4 · Answer 1 · answered Mar 12 '12 at 04:29

Unfortunately, for best compatibility the answer is yes, you need to inline your styles. You'll also have to use tables for markup.

Tools such as premailer, which inline the styles for you, help alleviate a lot of headaches though.

CampaignMonitor provides a good list of CSS support.

score 3 · Accepted Answer · answered Mar 12 '12 at 04:20

3

Using CSS and HTML in Email Newsletters a post in http://groundwire.org will help you..

http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters

answered Mar 12 '12 at 04:20

Avin Varghese

4,340
1
22
31

score 3 · Answer 3 · answered Mar 12 '12 at 04:25

3

I recommend htmlemailboilerplate

answered Mar 12 '12 at 04:25

Philip

4,592
2
20
28

score 1 · Answer 4 · answered Jul 04 '12 at 15:59

To be the most compatible with the widest range of email clients you'll want to use inline styles. I always try to think like a web programmer from 1995 when developing email templates.

Tables - YES! Transparent PNGs - Nooooooooooo.

Thankfully there are a lot of tools out there to help in building email templates that work across most email clients. MailChimp's Email Blueprints project had a lot of templates you can start with.

You CAN use CSS styling while in development (the MailChimp templates do this). But before you send the email you'll need to run it through an HTML Inliner tool to put all the CSS styles inline. MailChimp does this automatically if you use their service. Or Premailer works great too.

Building HTML emails, can I put styles in the header section or do I have to use inline styles?

4 Answers4

Linked