CSS inliner
Para qué sirve de verdad un CSS inliner
El email no es una pestaña del navegador. Gmail, Outlook, Apple Mail y la mayoría de vistas previas del ESP aplican sus propias reglas sobre qué CSS respetan. Un `<link rel="stylesheet">` a tu CSS de marca suele ignorarse. Un bloque `<style>` en el `<head>` sobrevive en algunos clientes y desaparece en otros. Lo que más suele funcionar es HTML sencillo con la presentación en atributos `style` en las etiquetas que lo necesitan. Un CSS inliner hace esto: mantienes la estructura en HTML y las reglas en CSS como en la web; en un paso copia las declaraciones que coinciden en cada elemento. El archivo que pegas en Mailchimp, Brevo o tu flujo transaccional sigue siendo HTML, pero ya no depende de que cargue bien una hoja de estilo aparte. Esta página está pensada para ese traspaso: HTML y CSS en pestañas separadas (o importa .html + .css), «Inlinear CSS» y el resultado a la derecha. Cuando encaje, copia, descarga o abre «Vista previa HTML» en el playground de inicio para revisar el diseño antes del envío de prueba.
Hoja externa y CSS incorporado — no una sola fuente
Muchos inliners online asumen que el CSS ya está dentro del HTML — normalmente un `<style>` exportado desde la herramienta de diseño. Cuando el proyecto se divide como toca — `template.html` más `styles.css` tras el build, entrega de Figma o generador estático — toca unir a mano o lanzar un CLI que solo usas dos veces al año. Nuestro CSS inliner trata ambos casos por igual: marcado en la pestaña HTML, reglas en la de CSS, o importa hasta dos archivos (`.html` y `.css`). El CSS del tab se aplica junto con los bloques `<style>` del HTML. La salida es HTML con atributos `style` en línea; se quitan las etiquetas `<style>` — lo que esperan la mayoría de flujos de email. Importa en newsletters y correos transaccionales: tipografía y botones en un CSS compartido, fragmentos HTML de distintos autores. Sin leer CSS externo te atas en cuanto el repo parece un proyecto real.
El procesamiento corre en el navegador tras cargar — sin cuenta ni cola de subida. `:hover`, `::before` y selectores que no se resuelven se omiten y aparecen en «Notas». Los `@media` simples se aplanan; el responsive en la bandeja de entrada no es igual que en la web — envía siempre una prueba real a tus clientes objetivo. Para revisar espaciados o clases: «Vista previa HTML» manda la salida en línea al playground de inicio — útil antes de pegar en el ESP.
Abrir el CSS inlinerPestañas HTML + CSS
Estructura y presentación separadas como en un repo. Cuando esté listo, inlinea y obtén el archivo para enviar.
Dos archivos de una vez
Importa .html y .css juntos — menos riesgo de pegado truncado.
Vista previa en inicio
HTML en línea en una pestaña nueva del playground antes de copiar al ESP.
CSS inliner para email con hojas de estilo externas
La mayoría de herramientas solo reescriben el CSS ya embebido en el HTML. Aquí archivo .css aparte y etiquetas <style> en el marcado — en una sola pasada — y luego copia, descarga o vista previa.
Un .css externo sin fusionar a mano antes
Si `email.css` está junto a `template.html`, importa ambos o pega en las dos pestañas. Los selectores pasan a atributos `style` — el formato que esperan los clientes de correo. No hace falta meter la hoja en el documento antes de que la herramienta actúe. Los `<style>` del HTML se procesan en el mismo paso. A la derecha, el HTML en línea completo en solo lectura. Copia desde el icono del encabezado de salida, descarga `inlined.html` o «Vista previa HTML» para el playground. Todo queda local.
- Pestaña CSS aparte, como en un proyecto real
- CSS externo y <style> en un paso
- Notas sobre reglas omitidas
- Local en el navegador, sin subida
Cómo inlinear CSS en plantillas de email HTML
Añade HTML y CSS
La plantilla en la pestaña HTML. Botones, tipografía y utilidades en la de CSS — o importa .html + .css. Si queda `<style>` en el head, déjalo: también se inlinea.
Pulsa «Inlinear CSS»
Las reglas que coincidan pasan a atributos style. Revisa «Notas» por lo omitido. A la izquierda sigues editando; a la derecha, el resultado — vuelve a ejecutar si hace falta.
Verifica y envía
Copia, guarda o vista previa en el playground de inicio. Pega en el ESP, prueba en Gmail y Outlook y guarda el .html aprobado.
FAQ del CSS inliner
¿Listo para inlinear CSS en el próximo envío?
Pega el HTML, añade CSS externo o incorporado, inlinea. Compara con una bandeja de prueba y luego guarda o copia.
CSS inliner
- .css externo y HTML en un solo paso
- Bloques <style> incorporados incluidos
- Vista previa HTML en el playground de inicio
- No signup; use the tool in the browser
Tras inlinear, envía un correo de prueba real — los clientes de correo ganan a cualquier vista previa.
Un HTML para tu ESP
Inlinea una vez, pega en la campaña y archiva la versión aprobada.