Quando utilizamos CSS em arquivo HTML que será visualizado via browser precisamos lidar com algumas restrições, evitar algumas propriedades CSS que não são suportadas ou que tenham diferenças de render entre browsers, ou seja, o uso de CSS e o suporte aos padrões é diferente entre browsers e ambientes, e o assunto é ainda mais complicado quando é sobre softwares “Leitores de e-mail” .
Precisamos gerar e-mail para várias finalidades, como newsletter, campanha de marketing e mensagens de sistema, e para isso podemos podemos usar os formatos de arquivo TXT e HTML, e no caso utilizar CSS temos que evitar algumas propriedades, pois os leitores de email retiram propriedades que possam comprometer a sua segurança.
Como as propriedades position e float, que seguem a seguinte lógica, imagine lendo um mail via browser(gmail,yahoo) e você recebe um mensagem que através de CSS posiciona um link invisível sobre o logo da aplicação (gmail…) e este link redireciona para um outro site !!
Então evite layout com colunas, por que não é possível alterar o fluxo do conteúdo com POSITION e FLOAT, prefiro evitar ao invés de utilizar tabelas.
Uma outra restrição é que o leitor apenas interpreta STYLE IN-LINE, o leitor de e-mail remove qualquer tag que inclua arquivos externos, como o elemento STYLE e LINK, e qualquer classe, id e seletor CSS que houver em sua mensagem.
Ex: Este trecho é removido em muitos leitores de e-mail
<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}
</link>
Já isso é permitido pela maioria
<h1 style="text-align:center">
Logo
</h1>
<span style="color:red">
Alerta
</span>
<p> style="font-size:2em">
Loren Lipsun
</p>
Então conclusão,
- não utilize CSS externo
- não coloque seu CSS no cabeçalho da pagina
- utilize style in-line diretamente nas tags HTML.
Segue alguns links com mais informações sobre o assunto
http://del.icio.us/marco.moura/css-email
