Why CSS is not working when sending HTML email?

What you CAN'T do:

• Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
• Link to an external stylesheet. Not many email clients support this, best to just forget it.
• Background-image / Background-position. Gmail is also the culprit on this one.
• Clear your floats. Gmail again.
• Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
• Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.

There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.

What you CAN do.

In two words, inline styles. It's not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website.

from this site

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.

You need to use inline styles.