CSS in HTML email

CSS (Cascading Style Sheets) is a Godsend for websites, but don’t put too much faith in
it with HTML email. For instance, you shouldn’t expect DIVs to work. And definitely stay
away from CSS positioning. Won’t work. If you’re a CSS-standards freak, you are going to
hate yourself after coding HTML email.
You’ll have to rely on old-fashioned for your layouts in HTML email, and only
use CSS for simple font formatting and colors. Always design your CSS to “fail gracefully.” That means if someone took away your CSS, your design and content would
still display decently. Before you send your HTML email, delete the CSS and see what it
looks like. Did you have tiny text that is now gigantic, and blowing out your tables?
CSS is especially a touchy situation if you’re using a WYSIWYG to design your HTML
email, because WYSIWYGs insert all kinds of crazy CSS and DIVs by default. It’s one of
the drawbacks of WYSIWYGs for HTML email. It may help you get things coded, but you
still have to understand HTML enough to go back and remove some of the code, so
things won’t break in email applications. You might as well code by hand.
Using Microsoft Word to generate HTML is even worse than using WYSIWYGs. Word adds
so much code behind the scenes, it’s unbelievable. Don’t do it. Learn to code HTML, or
use our built-in HTML email designer.
If your email design uses lots of CSS, be sure to check it in Google’s Gmail. At the time
of this writing, they don’t fully support CSS, so you’ll see your fonts defaulting to Arial,
and black in color. Here’s what our MonkeyWrench Newsletter looked like in Outlook
2003 (which supports CSS just fine) vs. Gmail...

Gmail stripped out virtually all of my CSS! Where did my font sizes, font colors, and lineheight
go? And since the fonts are so much larger in Gmail, it could have blown out my
table cells (if I didn’t know what I was doing). But notice the top line (next to the peeking
chimp). It wrapped my text into 2 rows. Blech!