Conselhos para utilizar HTML/CSS em um e-mail

Quando utilizamos CSS em arquivo HTML que será visualizado via browser precisamos conhecer quais são as restrições imposta pelos Browsers, temos que evitar utilizar alguma propriedade CSS que não seja suportada ou que tenha diferença de render entre browsers, ou seja, o uso de CSS devido a diferença de fabricantes e o suporte aos padrões que cada um propõe tem suas limitações, se temos estas e outras preocupações com os browser imagine com um “Leitor de e-mail” que tem ainda mais fabricantes, os software off-line(Outlook,Eudora) e os on-line( Gmail,Yahoo), e todos atrasados no suporte ao CSS.
Para enviar um e-mail (newsletter, mensagem automática) no formato HTML com CSS temos que evitar algumas propriedades do CSS, os leitores de e-mail retiram ou então não suportam algumas propriedades que possam comprometer a sua segurança.
Não utilize as propriedades position e float. Muitos softwares não permitem elas.
Ex: Imagine lendo um e-mail via browser(gmail,yahho) e você recebe um mensagem que através de CSS posiciona um link invisível sobre o logo do site, e este link redireciona para um outro site !!

Um conselho, você não pode alterar o fluxo do conteúdo com POSITION e FLOAT, tente evitar o layout com colunas, ou então, utilize a propriedade display e text-align para as colunas.

Um outro problema é que o leitor apenas interpreta STYLE IN-LINE, para não houver conflito com o próprio estilo (CSS STYLE) do leitor de e-mail ele remove do arquivo o elemento STYLE, LINK e qualquer classe, id e seletor CSS que contiver em sua mensagem.

Ex:

• Isto não irá funcionar :

<style> #logo{text-align:center} </style>

<link href="http://site.com/newsletter.css" type="text/css" rel="stylesheet" />

#logo{text-align:center}

.teste{color:red}

p{font-size:2em}

• Isto funciona

<h1 style="text-align:center">Logo</h1>

<span style="color:red">Alerta</span>

<p> style="font-size:2em">Loren Lipsun</p>

Então não utilize css externo nem coloque seu css no cabeçalho da pagina, utilize style in-line diretamente nas TAGs.

Segue alguns links com mais informações sobre o assunto
http://del.icio.us/marco.moura/css-email