Home Resources Blog

Update: Mark has published a comprehensive follow up to this article which takes a more accessible approach and includes a sample template to help you get started.

Most people who’ve attempted to recreate a sophisticated design in HTML email have run into a wall when using CSS, either in the form of inexplicable mangling by email clients or a pronouncement by an email administrator stating that CSS is “against the rules”. If you’re not content to roll over and use font tags in your HTML emails, read on.

Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. Yes, we really just said that. Not all attributes will be invited to the party, but many of them work flawlessly with this method.

  • Stephen Jones

    I found this very informative since I have been running into problems creating html emails that don’t display correctly in various email clients.

  • Jon Roobottom

    Brilliant! Just what I was looking for.

  • Matt Miquelon

    I have been looking for newer content on this subject since although this was posted recently, the original article is over a year old. It’s still a great article and perhaps is the definitive authority if there is nothing newer available. i am going to try it and see what happens.

  • Chris Vivion

    The most steadfast way to get around all of this, though it requires a little more code, is to simply follow the hotmail way and include all styles inline.

  • Abacioaei Diana

    Very very helpfull.Thank you.Regdards.

  • Ross

    this is good stuff, i got that problem too, previously had to put in two dots to avoid dot stripping , bad practice.

    this blog really helps lots, thanx man

  • Dave Greiner

    Hey Ross, glad to hear you find the blog useful.

    You’ll be pleased to know that we have a very exciting follow up to this article coming soon that everyone should find really handy. Stay tuned…

  • Rene

    You’ve definitely uncovered alot of the major problems with styles in newsletters. I’ve been using a combination of styles and font tags for a long time now – there are just so many email clients out there that it is impossible to test them all and having font tags as a backup seemed to be a good alternative. This article makes me believe it is now possible to ditch the font tags.

    I think many designers have figured out their own workarounds to problems that are very similar to yours. eg/ For the Hotmail style-stripping, my workaround involves adding the styles after the body tag and thus they are not stripped. For the periods getting stripped, you don’t necessarily have to add the class selectors – just make sure the period doesn’t start the line of code – put it after the closing bracket } of a previous style. eg:

    } .pagetitle {color : #333333; font-size:18px; text-transform: uppercase;
    } .sectiontitle {color : #FF984B; font-size:14px; font-family : times new roman;
    }

    Feel free to contact me through my website if you want examples.

  • Kumar

    The RADIO box name attributes are removed in hotmail when we send any Html form campaign to hotmail account.
    HTML code inside the form tag:
    From Hotmail Inbox:

    Kindly help me to overcome this issue.

    Thanks in advance.

  • Dave Greiner

    Kumar, unfortunately HTML forms just don’t work in Hotmail. Check out this article of ours which explains why.

  • ByteDreams

    very helpful article(s). I don’t create newsletters per se, but rather was looking for ways to dress up my personal emails, at the same time getting practice with html and css. So, I’m actually looking for ways of creating stationary – that works, LOL. Thank you for the great info. I too wonder about Thunderbird as I think was mentioned in one of the other comments. One reason I avoided using it because it didnt seem to have a feature for stationary, and like personalizing my emails.

  • silverhay

    i am searching for a solution to use stylesheets in html newsletters on the horde framework.
    I haven`t found one yet.

    Greetings

  • joe smith

    What about Gmail? Kinda missed the fasting growing webclient out there!

  • Dave Greiner

    Joe, Gmail is covered in Mark’s follow-up article on the same topic.

  • David Casper

    What I have discovered is that you cannot have a period ‘.’ as the first character on the line, so a space before the period works – you don’t need to dangle a closing bracket as suggested above – it is unnecessary.

    I am wondering if the period goes back to the dawn of email, when entering a period as the first character on a line indicated end-of-message, and caused the message to be sent. So maybe this stripping of periods as the first character on a line is a leftover from that, but mail agents are wary of their messages being truncated somewhere along the line, and so are stripping those leading periods.

  • Jamie

    Thanks for the in-depth article. You saved my project!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free