Cuando venimos del desarrollo web, maquetar un email puede sentirse como volver varios años atrás. En una web actual damos por hecho que podemos usar Flexbox, Grid, variables CSS, animaciones, fuentes externas, pseudo-elementos, componentes interactivos y media queries avanzadas. Sin embargo, en email marketing la pregunta no es “¿puedo escribir este CSS?”, sino algo bastante más práctico: ¿lo van a interpretar correctamente Gmail, Outlook, Apple Mail, Yahoo y otros clientes de correo?
Y aquí empieza el verdadero reto. El CSS en email existe, funciona y es necesario, pero no funciona con la misma libertad que en una página web. Por eso, cuando hablamos de css email, css compatible email o css outlook, en realidad estamos hablando de compatibilidad, pruebas y decisiones de diseño mucho más conservadoras.
Un email no se renderiza en un navegador universal. Se abre en muchos clientes distintos, cada uno con sus propias reglas, filtros y limitaciones. Lo que se ve perfecto en Apple Mail puede romperse en Outlook. Lo que funciona en Gmail móvil puede comportarse de forma diferente en un webmail corporativo. Por eso, para diseñar emails eficaces, conviene pensar menos como si estuviéramos creando una landing page y más como si estuviéramos construyendo una pieza de comunicación resistente.
Si ya has trabajado con maquetación de emails o estás empezando a explorar herramientas como MJML, te puede resultar útil complementar este artículo con la guía sobre qué es MJML y por qué facilita la maquetación de emails responsive, donde explico cómo este framework ayuda a reducir parte de la complejidad técnica.
Por qué CSS en email marketing no funciona igual que en una web
En desarrollo web, el navegador interpreta HTML y CSS siguiendo estándares bastante consistentes. Puede haber diferencias entre Chrome, Safari, Firefox o Edge, pero en general existe una base común razonablemente estable. En email marketing, en cambio, la situación es bastante más irregular.
Cada cliente de correo puede modificar, filtrar o ignorar partes del HTML y del CSS. Algunos aceptan estilos en la etiqueta <style>. Otros los procesan de forma parcial. Algunos respetan propiedades como border-radius, mientras que otros las ignoran en determinados contextos. Y luego está Outlook, que durante años ha sido uno de los grandes dolores de cabeza para quienes maquetan emails.
El problema no es solo CSS, sino el motor de renderizado
Una de las razones por las que el CSS en email es tan impredecible está en el motor que utiliza cada cliente para mostrar el mensaje. Apple Mail, por ejemplo, suele ofrecer buen soporte porque se apoya en WebKit. En cambio, algunas versiones clásicas de Outlook para Windows han usado Microsoft Word como motor de renderizado, lo que explica muchas de sus limitaciones con propiedades modernas de CSS.
Esto significa que un mismo email puede verse muy bien en un cliente y romperse en otro. No necesariamente porque el código esté mal escrito, sino porque el entorno donde se abre el email no interpreta CSS como lo haría un navegador moderno.
Por eso, cuando diseñamos una campaña de email marketing, no basta con abrir el archivo HTML en el navegador y comprobar que se ve bien. Esa prueba solo nos dice cómo lo interpreta el navegador, no cómo lo interpretará Outlook, Gmail, Apple Mail o un cliente de correo corporativo.
La mentalidad correcta: diseñar para resistir
En email marketing conviene trabajar con una lógica de degradación elegante. Es decir, el email puede verse más bonito en clientes modernos, pero debe seguir siendo legible, claro y funcional en clientes más restrictivos.
No pasa nada si una sombra decorativa no aparece. Tampoco es grave si un borde redondeado se muestra como un rectángulo. Lo importante es que el mensaje se entienda, que el botón principal sea visible y que la jerarquía visual siga funcionando.
La pregunta clave sería: si se eliminan los efectos decorativos, ¿el email sigue cumpliendo su función? Si la respuesta es sí, vamos por buen camino.
La base más fiable: tablas, atributos HTML y CSS inline
Aunque pueda sonar anticuado, la estructura más fiable para un email sigue estando basada en tablas HTML. No porque las tablas sean mejores desde el punto de vista semántico, sino porque muchos clientes de correo las interpretan de forma más estable que los layouts modernos con div, Flexbox o Grid.
En email marketing, las tablas no se usan para representar datos, sino para controlar la estructura visual. Es una práctica heredada, sí, pero todavía muy útil cuando necesitamos que una newsletter se vea correctamente en distintos entornos.
Si estás comparando enfoques de maquetación, también puedes revisar el artículo sobre MJML vs HTML tradicional para emails, donde explico las ventajas y limitaciones de trabajar directamente con HTML frente a usar una herramienta que abstrae parte del código.
Qué significa usar CSS inline en email
Usar CSS inline significa aplicar los estilos directamente sobre cada elemento HTML. En una web esto sería poco recomendable por mantenimiento, escalabilidad y separación de responsabilidades. En email, sin embargo, sigue siendo una de las prácticas más seguras.
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #333333;">
Texto del email
</td>La razón es sencilla: algunos clientes de correo eliminan o modifican estilos declarados en el <head>. En cambio, los estilos inline tienen más posibilidades de sobrevivir al procesamiento del cliente.
Esto no significa que todo el CSS deba ir siempre inline y que no podamos usar clases. Significa que los estilos esenciales deben estar lo más cerca posible del elemento que los necesita. Por ejemplo: tamaño de texto, color, fuente, espaciado básico, fondo y estilos principales de botones.
Cuándo sí tiene sentido usar estilos en la etiqueta style
Aunque el CSS inline es la base más segura, los estilos dentro de <style> siguen teniendo utilidad. Pueden utilizarse para media queries, ajustes responsive, modo oscuro, clases auxiliares o mejoras progresivas para clientes modernos.
La diferencia está en no depender exclusivamente de ellos. Una buena regla práctica sería esta: lo esencial va inline; lo complementario puede ir en <style>.
Por ejemplo, un botón debe seguir pareciendo un botón aunque una media query no se aplique. Una columna debe seguir mostrando el contenido aunque no se apile exactamente como esperábamos. Y un bloque de texto debe seguir siendo legible aunque no cargue la fuente personalizada.
Propiedades CSS que suelen funcionar bien en email
A pesar de las limitaciones, hay muchas propiedades CSS que sí funcionan de manera bastante fiable en email marketing. La clave está en usarlas con sentido común y evitar que el diseño dependa de propiedades demasiado modernas o frágiles.
Tipografía básica
Las propiedades relacionadas con texto suelen ser de las más seguras. Entre ellas encontramos:
font-familyfont-sizefont-weightline-heightcolortext-aligntext-decorationtext-transform
Estas propiedades son fundamentales para construir jerarquía visual. Permiten diferenciar títulos, subtítulos, párrafos, enlaces y llamadas a la acción sin depender de estructuras complejas.
Eso sí, conviene usar fuentes de sistema o definir buenos fallbacks. Las fuentes externas pueden funcionar en algunos clientes, pero no en todos. Por eso, si una marca utiliza una tipografía personalizada, lo más prudente es acompañarla siempre de alternativas seguras:
style="font-family: 'MiFuente', Arial, Helvetica, sans-serif;"De esta manera, si la fuente principal no carga, el email seguirá viéndose correctamente.
Colores, fondos simples y bordes
También suelen funcionar bien propiedades como color, background-color, border, padding, width o vertical-align. Son propiedades sencillas, pero muy útiles para construir una experiencia visual clara.
El uso de background-color es especialmente importante porque permite crear bloques visuales sin depender de imágenes. En email marketing, siempre conviene que el diseño funcione aunque las imágenes no carguen. Por eso, un botón con color de fondo y texto real suele ser más robusto que una imagen que contiene el texto del botón.
Este principio también está muy relacionado con la accesibilidad. Si el mensaje principal está dentro de una imagen y esa imagen no se carga, el usuario puede quedarse sin información clave. En cambio, si el texto es real, el contenido sigue estando disponible.
Espaciado con padding
El padding suele ser más fiable que el margin, especialmente cuando se aplica sobre celdas <td>. Por ejemplo:
<td style="padding: 24px 32px;">
Contenido del bloque
</td>En cambio, confiar demasiado en márgenes puede producir resultados inconsistentes, sobre todo en Outlook. Por eso, en emails complejos se suele controlar el espaciado mediante tablas, celdas, atributos y padding.
No es tan limpio como trabajar con CSS moderno, pero es mucho más previsible.
Propiedades CSS que funcionan, pero con reservas
Hay un segundo grupo de propiedades que pueden funcionar bien en muchos clientes, pero no conviene tratarlas como base estructural. Son útiles para mejorar el acabado visual, pero no deberían sostener la comprensión del email.
Border-radius
border-radius se utiliza mucho para botones, tarjetas o imágenes redondeadas. En muchos clientes funciona correctamente, pero en otros puede fallar o requerir soluciones específicas.
La recomendación práctica es sencilla: puedes usar border-radius, pero el email no debería depender de él. Si un botón pierde las esquinas redondeadas, debe seguir pareciendo un botón. Si una tarjeta se muestra con esquinas rectas, el contenido debe seguir siendo claro.
En otras palabras, los bordes redondeados son una mejora visual, no una garantía estructural.
Box-shadow
Las sombras pueden aportar profundidad y separar visualmente bloques, pero no son una propiedad especialmente fiable en email. Algunos clientes las muestran correctamente, otros las ignoran y otros pueden modificar su comportamiento tras una actualización.
Por eso, si quieres usar box-shadow, hazlo como recurso decorativo. No lo utilices como único mecanismo para diferenciar una tarjeta del fondo. Es mejor combinarlo con un color de fondo, un borde suave o un espaciado claro.
Así, si la sombra no aparece, el diseño no se rompe.
Media queries
Las media queries son muy útiles para adaptar newsletters a móvil. Permiten ajustar tamaños de texto, apilar columnas, modificar anchos o mejorar zonas táctiles.
Sin embargo, no todos los clientes de correo las soportan igual. Por eso, es recomendable diseñar emails que ya sean legibles sin depender por completo de media queries. Una estructura híbrida, fluida o mobile-first suele ser más segura que un diseño rígido que solo funciona si se aplican todos los estilos responsive.
Si estás empezando con este tipo de maquetación, puedes ampliar esta parte con la guía sobre cómo crear tu primera newsletter responsive con MJML, especialmente si buscas una forma más sencilla de trabajar con columnas, secciones y comportamiento móvil.
Modo oscuro
El modo oscuro es uno de los puntos más delicados en email marketing. Algunos clientes respetan tus colores, otros los modifican automáticamente y otros invierten parcialmente fondos, textos o imágenes.
Esto puede provocar problemas de contraste, logotipos que se ven mal o botones que pierden claridad. Por eso, conviene definir colores de fondo explícitos, probar imágenes en claro y oscuro, evitar textos sobre imágenes sin fallback y revisar siempre el email en varios clientes.
El modo oscuro no debe tratarse como un detalle menor. Cada vez más usuarios lo tienen activado por defecto, así que ignorarlo puede afectar directamente a la legibilidad de una campaña.
CSS que conviene evitar en email marketing
Ahora viene la parte más importante cuando hablamos de CSS compatible con email: qué conviene evitar o, al menos, no usar como base del diseño.
Flexbox y Grid como estructura principal
Flexbox y Grid son dos herramientas fundamentales en desarrollo web moderno, pero en email marketing no son la opción más segura para la estructura principal.
Pueden funcionar en algunos clientes, especialmente en entornos más modernos, pero su soporte no es suficientemente uniforme como para utilizarlos como base de una newsletter que debe verse bien en Gmail, Outlook, Apple Mail y webmails variados.
La recomendación práctica es clara: usa tablas para la estructura principal y reserva Flexbox o Grid para casos muy controlados, siempre que hayas validado previamente el soporte en los clientes más importantes para tu audiencia.
Si vienes de trabajar mucho con layouts web, puede que esta limitación resulte frustrante. Pero en email marketing la prioridad no es usar la técnica más moderna, sino conseguir que el mensaje llegue de forma estable.
Position, float y layouts complejos
Propiedades como position: absolute, position: fixed, float o z-index pueden generar comportamientos imprevisibles en email. En una web permiten crear interfaces ricas y composiciones complejas. En un email, en cambio, suelen aumentar el riesgo de roturas.
Un email no necesita comportarse como una aplicación. Necesita comunicar una idea, mantener la identidad visual de la marca y dirigir a una acción clara. Cuanto más complejo sea el layout, más probable será que algo falle en algún cliente.
Pseudo-elementos y selectores avanzados
Selectores como :hover, :focus, :nth-child, combinadores complejos o pseudo-elementos como ::before y ::after no deberían formar parte de la base de un email comercial.
En desarrollo web son recursos muy útiles. De hecho, si te interesa este enfoque visual, en el blog también puedes leer sobre pseudo-elementos en CSS y cómo ayudan a crear ilustraciones más complejas. Pero en email marketing conviene ser mucho más prudente.
Si necesitas una decoración visual importante, probablemente sea mejor resolverla con HTML real, una imagen optimizada o una estructura más simple.
Variables CSS, animaciones y funciones modernas
Las custom properties, calc(), clamp(), filtros, máscaras, animaciones, transiciones o efectos avanzados pueden funcionar en algunos clientes, pero no deberían ser necesarios para una campaña de email marketing convencional.
El problema no es que estén “prohibidos”, sino que añaden incertidumbre. Y en email, la incertidumbre visual suele traducirse en pérdida de control sobre la experiencia final.
Cuando dudes, aplica esta regla: si una propiedad mejora el email pero no es imprescindible, puedes planteártela como mejora progresiva. Si una propiedad es imprescindible para que el email se entienda, debería ser muy compatible.
Outlook: el gran filtro de compatibilidad
Cuando se habla de CSS en Outlook, es importante aclarar que Outlook no es un único entorno. Existe Outlook clásico para Windows, el nuevo Outlook para Windows, Outlook.com, Outlook para Mac y las apps móviles de Outlook. Y no todos se comportan igual.
El problema histórico está sobre todo en Outlook clásico para Windows. Sus limitaciones han hecho que muchas plantillas de email tengan que incorporar soluciones específicas, comentarios condicionales o incluso VML para ciertos fondos y botones.
Qué suele romperse en Outlook
En Outlook conviene revisar especialmente:
- anchos de imágenes;
- fondos con imágenes;
- espaciados verticales inesperados;
- líneas blancas entre bloques;
- botones con bordes redondeados;
- columnas;
- sombras y efectos decorativos;
- fuentes personalizadas;
- márgenes.
Esto no significa que debamos diseñar emails feos o excesivamente básicos. Significa que debemos diseñar con una base robusta y dejar los detalles más delicados como mejoras visuales.
Cómo trabajar mejor con Outlook
Para mejorar la compatibilidad con Outlook, conviene seguir algunas buenas prácticas:
- usar tablas para la estructura principal;
- definir anchos de imágenes con cuidado;
- aplicar CSS inline en elementos clave;
- evitar depender de
marginpara el espaciado principal; - crear botones con texto real;
- probar el email antes del envío;
- asumir que algunos efectos visuales no se mostrarán igual.
No se trata de diseñar únicamente para Outlook, sino de evitar que Outlook destruya la experiencia básica del mensaje.
Ejemplo de estructura segura para un bloque de email
Un bloque de email relativamente seguro podría tener una estructura como esta:
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f5f5f5;">
<tr>
<td align="center" style="padding: 32px 16px;">
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="width: 100%; max-width: 600px; background-color: #ffffff;">
<tr>
<td style="padding: 32px; font-family: Arial, Helvetica, sans-serif; color: #222222;">
<h1 style="margin: 0 0 16px; font-size: 28px; line-height: 34px; font-weight: bold;">
Título principal
</h1>
<p style="margin: 0 0 24px; font-size: 16px; line-height: 24px;">
Texto introductorio del email con una estructura sencilla y compatible.
</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #cc2b5e; padding: 12px 24px;">
<a href="https://ejemplo.com" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff; text-decoration: none; display: inline-block;">
Ver más
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>Desde una mentalidad web moderna, este código puede parecer repetitivo. Pero en email marketing responde a una necesidad concreta: conseguir que el diseño sea estable en el mayor número posible de clientes.
Checklist de CSS compatible para email marketing
Antes de enviar una campaña, conviene revisar una pequeña lista de comprobación. No sustituye a las pruebas reales, pero ayuda a detectar problemas comunes.
Estructura
- ¿El layout principal está basado en tablas?
- ¿El ancho máximo está controlado?
- ¿El email se lee bien aunque no carguen las imágenes?
- ¿Las columnas se comportan correctamente en móvil?
Estilos
- ¿Los estilos esenciales están inline?
- ¿La tipografía tiene fuentes fallback?
- ¿Los colores de texto y fondo están definidos de forma explícita?
- ¿Los botones tienen texto real?
- ¿El espaciado depende más de padding que de margin?
Compatibilidad
- ¿El diseño funciona sin sombras?
- ¿El diseño funciona sin bordes redondeados?
- ¿El contenido se entiende sin fuentes externas?
- ¿Las media queries mejoran el diseño, pero no lo sostienen por completo?
- ¿Se ha probado en Gmail, Outlook, Apple Mail y móvil?
Accesibilidad y experiencia
- ¿El texto tiene buen contraste?
- ¿Los enlaces son claros?
- ¿Los botones tienen un tamaño cómodo para móvil?
- ¿Las imágenes tienen texto alternativo útil?
- ¿El orden de lectura tiene sentido?
Esta parte también conecta con una idea muy importante en diseño web y experiencia de usuario: reducir la fricción. Un email con una jerarquía clara, botones visibles y contenido fácil de escanear reduce la carga cognitiva y ayuda al usuario a tomar decisiones con menos esfuerzo.
Preguntas frecuentes sobre CSS en email
¿Puedo usar CSS en emails HTML?
Sí, puedes usar CSS en emails HTML, pero con más restricciones que en una web. Lo más recomendable es utilizar CSS inline para los estilos esenciales, mantener una estructura simple y probar el resultado en distintos clientes de correo antes del envío.
¿Flexbox y Grid funcionan en email marketing?
Pueden funcionar en algunos clientes, pero no son la opción más segura para la estructura principal de una campaña. Para emails comerciales que deben verse correctamente en muchos entornos, sigue siendo más fiable trabajar con tablas HTML y CSS inline.
¿Por qué Outlook rompe tantos emails?
Porque algunas versiones de Outlook, especialmente las clásicas de escritorio para Windows, no interpretan el HTML y el CSS como un navegador moderno. Esto puede afectar a fondos, espaciados, imágenes, bordes, fuentes y otros estilos visuales.
Diseñar emails con CSS es aceptar las reglas del medio
El CSS en email marketing no va de demostrar cuánto CSS sabemos usar. Va de tomar buenas decisiones para que el mensaje llegue bien, se lea bien y funcione en contextos muy diferentes.
Una newsletter no necesita comportarse como una web moderna. Necesita cargar correctamente, mantener la identidad visual de la marca, guiar la lectura y facilitar una acción clara. Para conseguirlo, muchas veces el mejor camino es aceptar las limitaciones del medio: tablas para la estructura, CSS inline para lo esencial, estilos progresivos para clientes modernos y pruebas constantes antes de enviar.
La clave no está en renunciar al diseño, sino en diseñar con realismo. Puedes usar colores, tipografías cuidadas, jerarquía visual, botones atractivos, fondos sólidos, imágenes optimizadas y pequeños detalles decorativos. Pero conviene evitar que la experiencia dependa de propiedades frágiles como sombras, layouts modernos, animaciones o fuentes externas.
En definitiva, el CSS que realmente funciona en email marketing es el que entiende su contexto. No el más moderno, no el más elegante, no el más parecido al de una landing page. El que funciona es el CSS que sobrevive a Gmail, se adapta a móvil, no se rompe en Outlook y mantiene intacto lo más importante: el mensaje.
