CSS a estilos inline
Generar snippets de estilos inline desde reglas CSS
CSS de entrada
Snippets de estilos inline
Ejemplos CSS a inline
Convierte reglas CSS en snippets de style inline para email o HTML. Ejemplo:
Estilos de encabezado y botón
CSS de entrada:
Salida de snippets inline:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es CSS a estilos inline?
Los estilos inline son atributos style en elementos HTML. Los clientes de email, algunos CMS y ciertos frameworks requieren estilos inline porque eliminan o ignoran hojas de estilo externas. Esta herramienta convierte reglas CSS en snippets style="..." inline que puedes pegar en HTML. Las especificaciones W3C CSS definen el formato fuente.
La conversión se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. La salida está lista para HTML. Para inlining completo de email HTML (emparejar selectores con elementos), usa una herramienta dedicada como Juice o similar. Esta herramienta genera snippets de estilo desde reglas CSS.
Cómo usar esta herramienta
Pegar o subir CSS
Copia tu CSS y pégalo en el editor izquierdo. También puedes hacer clic en Subir para cargar un archivo .css. El botón Ejemplo carga datos de ejemplo. El CSS inválido mostrará un error.
Revisar los snippets inline
El panel derecho muestra snippets de estilo para cada regla. Cada snippet es un string <code>style="..."</code> que puedes añadir a elementos HTML. Los selectores se listan para que sepas qué elemento recibe qué estilos.
Copiar o descargar
Usa Copiar o Descargar. Pega los snippets en tu HTML. Para formatear CSS primero, el Formateador CSS. Para minificar, el Minificador CSS.
Cómo funciona la conversión
La herramienta analiza tus reglas CSS y convierte cada bloque de declaración en un string style="property: value; ...". Los selectores se listan para que sepas qué snippet aplica a qué elemento. La salida sigue la sintaxis del atributo style HTML. Para inlining completo HTML+CSS (emparejar selectores con elementos automáticamente), herramientas como Juice o Can I Email documentan el soporte de clientes de email.
Cuándo ayuda CSS a inline
El HTML de email es el caso de uso más común. Gmail, Outlook y muchos clientes eliminan tags <style> y hojas de estilo externas. Los estilos inline son la forma más fiable de estilizar email. Convertir tu CSS aquí te da snippets para añadir a <td>, <div> y otros elementos.
Sistemas CMS, generadores PDF o herramientas legacy que aceptan HTML pero no archivos CSS suelen necesitar estilos inline. Convertir aquí proporciona el formato que esperan. Para prefijos de vendor antes de inlining, el Prefijador CSS. Para formatear o minificar CSS primero, Formateador CSS o Minificador CSS.
Preguntas frecuentes
¿Inlina en HTML completo?
Esta herramienta genera snippets de estilo desde reglas CSS. No analiza HTML ni aplica estilos a elementos. Para conversión completa (HTML + CSS a HTML con estilos inline), usa una herramienta como Juice o similar.
¿Mis datos son privados?
Sí. La conversión se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Qué pasa con las pseudo-clases?
Las pseudo-clases como :hover y ::before no pueden inlinarse. Los estilos inline solo soportan propiedades estáticas. Úsalos para estilos base; los clientes de email pueden soportar <style> limitado para hover.
¿Y las media queries?
Las media queries no pueden inlinarse. Los estilos inline son por elemento. Para email responsive, usa un enfoque híbrido: estilos base inline y <code><style></code> para media queries donde se soporte.
¿Especificidad y herencia?
Los estilos inline tienen alta especificidad. Cuando pegas un snippet en un elemento, sobrescribe la mayoría de otros estilos. El orden importa cuando varias reglas aplican al mismo elemento.
Herramientas relacionadas
Para la especificación CSS: W3C CSS. MDN CSS es la referencia. Can I Email documenta el soporte de clientes de email para CSS.