Last updated
When to Use the Email HTML Inliner
- Before sending any HTML email through an ESP (Mailchimp, SendGrid, Klaviyo, etc.)
- When testing email rendering in Outlook, which strips style blocks
- When Gmail is stripping your styles in certain contexts
- When converting a web-style HTML template to an email-safe version
- When building transactional email templates that must render correctly everywhere
- When adding dark mode support with prefers-color-scheme media queries
The Email HTML Inliner on TechConverter.me handles all the complexity of CSS-to-inline conversion automatically, saving hours of manual work and ensuring your emails render correctly across every major email client.
Examples
Example 1: Basic Template Inlining
A developer writes a clean HTML email template with a style block for maintainability:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; }
.container { max-width: 600px; margin: 0 auto; background-color: #ffffff; padding: 20px; }
h1 { color: #333333; font-size: 24px; margin-bottom: 16px; }
p { color: #666666; font-size: 16px; line-height: 1.5; }
.button { display: inline-block; background-color: #007bff; color: #ffffff;
padding: 12px 24px; text-decoration: none; border-radius: 4px; }
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Our Service</h1>
<p>Thank you for signing up. Click below to get started.</p>
<a href="https://example.com/start" class="button">Get Started</a>
</div>
</body>
</html>
After running through the inliner, the output has all styles moved inline:
<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0;">
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; padding: 20px;">
<h1 style="color: #333333; font-size: 24px; margin-bottom: 16px;">Welcome to Our Service</h1>
<p style="color: #666666; font-size: 16px; line-height: 1.5;">Thank you for signing up.</p>
<a href="https://example.com/start"
style="display: inline-block; background-color: #007bff; color: #ffffff;
padding: 12px 24px; text-decoration: none; border-radius: 4px;">
Get Started
</a>
</div>
</body>
The style block is removed and every element has its styles applied directly, ready for sending through any email service provider.
Example 2: Handling CSS Specificity Conflicts
When multiple CSS rules target the same element, the inliner resolves conflicts using standard specificity rules. Given this CSS:
p { color: #666666; }
.highlight { color: #ff0000; }
p.highlight { color: #cc0000; font-weight: bold; }
Applied to this HTML:
<p class="highlight">Important notice</p>
The inliner correctly resolves the most specific rule and outputs:
<p style="color: #cc0000; font-weight: bold;">Important notice</p>
Example 3: Preserving Media Queries for Responsive Email
Media queries cannot be inlined, so the inliner preserves them in a style block while inlining all other rules. This allows responsive designs to work in clients that support media queries:
<!-- Inliner output: media queries preserved in <style> block -->
<style>
@media only screen and (max-width: 600px) {
.container { width: 100% !important; padding: 10px !important; }
.button { display: block !important; text-align: center !important; }
}
</style>
<!-- All other styles are inlined on elements -->
<div style="max-width: 600px; margin: 0 auto;" class="container">
...
</div>