Central de Ajuda - Benchmark Email

Página Inicial da Base de Conhecimentos aero-right DÚVIDAS GERAIS aero-right Usar CSS em emails HTML

Usar CSS em emails HTML

DÚVIDAS GERAIS Atualizado em outubro 26, 2022
Normalmente o código CSS é colocado ou num ficheiro CSS separado ou numa style tag no cabeçalho do email. Isto NÃO funciona em emails. A maior parte dos clientes de email (como YahooMail!, Gmail, Hotmail, etc), irá remover o cabeçalho e as body tags por defeito. Estes clientes não referenciam ficheiros externos de CSS porque pode interferir com a sua própria codificação CSS. Recomendamos que coloque o seu código CSS em linha com o seu conteúdo em vez de usar head tags e body tags. Use um DIV com largura de 100%, por exemplo, em vez de CSS de cabeçalho. Eis o exemplo:
<div style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background-color:#EEEEEE;">Your content here....</div>

Recomendamos que teste o seu CSS minunciosamente muito antes de enviar o seu email. Em geral, as coisas mais simples como estilos de fonte, tamanhos e cores irão funcionar bem. Mas algumas coisas como DIVs e posicionamento x,y,z, poderão não funcionar de todo. Mantenha o sei CSS simples de modo a que se este falhar a carregar as pessoas consigam ler a sua mensagem à mesma.

Infelizmente, pode confiar tanto no CSS em emails html  como nas páginas Web nos browsers.

Coisas a Evitar

  1. Não confie em style sheets externas (<link rel="stylesheet">) ou incorporadas (contidas na tag <style> acima da tag <body>). Esta é a coisa mais importante a evitar. Muitos serviços de email cortam tudo o que esteja acima da body tag e desactivam style sheets externas.
  2. Nunca use javascript numa newsletter. Usar javascript pode fazer com que a sua newsletter seja marcada como spam.
  3. Nunca use atributos de tag na tag <body> (tais como larguras ou cores de fundo). A maior parte dos serviços de emauil ignora a tag <body>.
  4. Evite imagens de fundo. Muitos clientes de email não aceitam/encorajam imagens de fundo. Pode usar cores de fundo se o desejar (atributo de tag bgcolor ou background-color: css statement).

Coisas a Fazer

  1. Use tabelas como layout. As Tabelas são frequentemente mais aceites.
  2. Recomendamos que coloque o seu código CSS em linha com o seu conteúdo. Deverá ser algo parecido com:
    <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;">Your content here....</span>
  3. Declare a largura, preenchimento de célula e espaçamento de célula para todas as tabelas e células de tabela. Isto irá resultar numa largura fixa para o template.
  4. Use atributos de tag hspace e vspace para adicionar espaço em branco à volta de uma imagem.. Margem e preencimento de estilos em linha são aceites pela maior parte mas não por todos os clientes de email