CSS en Email: Lo que puedes y no puedes hacer
La realidad práctica de estilizar emails HTML con CSS.
CSS en email es un subconjunto restringido de CSS en navegadores. Las propiedades que usas diariamente en desarrollo web pueden no funcionar en clientes de email. Esta guía documenta qué es seguro, qué requiere soluciones alternativas y qué evitar completamente.
Si quieres saltarte las limitaciones de CSS, constructores visuales como Sequenzy generan código compatible automáticamente. Pero entender CSS en email te ayuda a depurar problemas y tomar decisiones informadas.
Estilos Inline vs Embebidos
Estilos Inline (Más Confiables)
<p style="color: #333333; font-size: 16px; line-height: 1.5;">
Text with inline styles
</p>Los estilos inline funcionan en todos los clientes de email. Tienen la mayor especificidad y no pueden ser eliminados. La desventaja: código verboso y sin reutilización sin duplicación.
Estilos Embebidos (Head)
<head>
<style>
.text-body {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<p class="text-body">Text with class</p>
</body>Los estilos embebidos funcionan en la mayoría de clientes pero Gmail históricamente los ha eliminado en ciertos contextos. Úsalos para mejoras (media queries) pero no para estilos críticos.
Mejor Práctica: Ambos
Usa estilos inline para renderizado crítico. Usa estilos embebidos para media queries y mejora progresiva. Herramientas inliner de CSS automatizan esta conversión.
CSS de Tipografía
Propiedades de Fuente Seguras
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold; /* or 700 */
font-style: italic;
color: #333333;
line-height: 1.5; /* or 24px */
text-align: left; /* center, right */
text-decoration: none; /* underline */
text-transform: uppercase; /* lowercase */
letter-spacing: 1px;Todos los clientes principales soportan estas propiedades. Mantente en unidades px para font-size (em/rem menos confiables). Evita valores de font-weight otros que normal (400) y bold (700).
Fuentes Web
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
<p style="font-family: 'Roboto', Arial, sans-serif;">
Custom font with fallback
</p>Las fuentes web funcionan en Apple Mail, iOS y algunos clientes Android. Gmail y Outlook usan la fuente de respaldo. Siempre incluye un respaldo web-safe.
CSS del Modelo de Caja
Padding (Seguro en Celdas de Tabla)
<td style="padding: 20px;">
Content with padding
</td>
<!-- Or individual sides -->
<td style="padding-top: 20px; padding-bottom: 10px;">
Content
</td>Padding en celdas de tabla es confiable. En divs y párrafos, los resultados varían. Cuando dudes, usa celdas de tabla.
Margin (Usar con Cuidado)
Los margins son inconsistentes, especialmente en Outlook. Prefiere padding en celdas contenedoras sobre margins en contenido.
<!-- Instead of margin on heading -->
<td style="padding-bottom: 20px;">
<h1 style="margin: 0;">Heading</h1>
</td>Ancho y Alto
width: 600px;
width: 100%;
max-width: 600px;
height: 200px; /* Avoid when possible */El ancho funciona de manera confiable. max-width es útil para emails responsivos pero Outlook lo ignora (usa comentarios condicionales para ancho fijo en Outlook). El alto debe evitarse ya que el contenido debe determinar la altura.
CSS de Fondo
Color de Fondo (Seguro)
background-color: #f5f5f5;
background: #f5f5f5; /* shorthand works too */Imágenes de Fondo (Complejo)
<!-- Works in most clients, NOT Outlook -->
<td style="background-image: url('image.jpg'); background-color: #333;">
<!-- For Outlook, use VML -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->
<div style="background-image: url('image.jpg');">
Content
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->Las imágenes de fondo requieren VML para soporte en Outlook. Siempre incluye un respaldo de background-color.
CSS de Bordes
Bordes Sólidos (Seguros)
border: 1px solid #cccccc;
border-bottom: 2px solid #333333;
border-top: none;Radio de Borde (No Outlook)
border-radius: 4px; /* Ignored in Outlook */Border-radius funciona en la mayoría de clientes pero Outlook muestra esquinas cuadradas. Para botones, esto suele ser aceptable. Para diseños redondeados críticos, usa imágenes.
CSS de Layout
Propiedad Display
display: block;
display: inline;
display: inline-block;
display: none;Valores básicos de display funcionan. display: flex y display: grid NO funcionan en email. Usa tablas para layout.
Position (Evitar)
El posicionamiento CSS (absolute, relative, fixed) no funciona de manera confiable. Usa layout basado en tablas en su lugar.
Float (Evitar)
Los floats son poco confiables en Outlook. Usa columnas de tabla para contenido lado a lado.
Media Queries
@media screen and (max-width: 600px) {
.mobile-full {
width: 100% !important;
display: block !important;
}
.mobile-hide {
display: none !important;
}
.mobile-text-center {
text-align: center !important;
}
}
@media (prefers-color-scheme: dark) {
.dark-bg {
background-color: #1a1a1a !important;
}
}Las media queries funcionan en Apple Mail, iOS, Gmail App. NO funcionan en Outlook o Gmail web (de manera confiable). Usa !important para sobrescribir estilos inline.
Reset de CSS para Email
<style>
/* Prevent text size adjustment */
body, table, td, p, a, li {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Remove table spacing */
table, td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove image borders and gaps */
img {
-ms-interpolation-mode: bicubic;
border: 0;
display: block;
outline: none;
text-decoration: none;
}
/* Reset body */
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
}
</style>Inlining de CSS
Herramientas convierten estilos embebidos a inline para confiabilidad:
- Juice: biblioteca Node.js para inlining de CSS
- Premailer: herramienta online y gem
- MJML: maneja inlining durante compilación
- Constructores de Email: Sequenzy y otros inlinean automáticamente
Depuración de Problemas de CSS
- Revisa estilos inline primero. Estilos inline faltantes o incorrectos son el problema más común.
- Prueba en Outlook. Si CSS funciona en Outlook, probablemente funciona en todas partes.
- Simplifica. Elimina CSS hasta que el problema desaparezca, luego agrega gradualmente.
- Revisa especificidad. Estilos inline pueden sobrescribir tus estilos embebidos.
La Conclusión
CSS en email es un lenguaje restringido. Mantente en propiedades bien soportadas, usa estilos inline para renderizado crítico, y prueba en varios clientes. Frameworks y constructores como Sequenzy manejan estas restricciones automáticamente.
Las limitaciones son frustrantes si estás acostumbrado a CSS web moderno. Pero entenderlas te permite construir emails que se renderizan consistentemente en todos los clientes de email peculiares que usan tus destinatarios.