Create stunning emails using Mailmodo CSS inliner tool
Creating email designs that actually capture readers' attention is something we all want to do. But wrestling with CSS in emails? That’s a whole different story. Most email clients ignore <style> tags, and applying styles inline means tweaking every single element—talk about tedious.
To resolve this issue, we at Mailmodo have built a Free CSS Inliner Tool that automatically converts your style blocks into inline styles. This way, you can motor through repetitive tasks and deliver eye-catching results.
How to use Mailmodo free CSS inliner tool
Step 1: Prepare your HTML Email
Copy your full HTML email code, including any <style> tags. You can usually find this code in the email builder of your ESP (email service provider).
Step 2: Go to the inliner tool
Visit Mailmodo’s CSS Inliner Tool. You’ll see a text area where you can paste your HTML.
Step 3: Get the converted HTML
After you paste it in, the tool will instantly convert your styles and show the new HTML file with inline styles applied to each tag. Copy this version of the HTML.
Step 4: Paste and test in your email platform
Paste the inlined HTML in your email marketing tool. Make sure to always send a test email to check how it looks in different inboxes and devices.
4 Best practices when using Mailmodo CSS inliner tool
Most email clients do not fully support modern web standards, so the structure of your HTML matters just as much as the CSS itself. Here are a few guidelines to follow:
- Stick to basic, widely supported HTML elements
Use standard tags like <table>, <tr>, <td>, <p>, <img>, and <a>. Avoid <video>, <form>, or script-based elements, as most clients either block them or strip them out entirely.
- Avoid deeply nested elements
Overly complex nesting can confuse CSS inliners and lead to styles not being applied correctly. Try to keep your HTML hierarchy shallow and organized.
- Keep your HTML file error-free
Errors in the HTML structure, like missing closing tags, can break the inlining process or result in rendering issues in the inbox.
- Add all CSS in a single
<style>block in the<head>
Make sure your CSS is easy for the inliner tool to find and process. Avoid multiple scattered <style> blocks or external stylesheets, as those may be ignored by email clients or inliner tools.
Common rendering issues in Outlook and how to fix them
Outlook is one of the most difficult email clients to work with because it uses Microsoft Word’s rendering engine rather than a web browser. This leads to a range of issues, including.
- Broken or misaligned layouts
Outlook often ignores modern layout methods like flexbox and floats, and can misalign even basic table structures. To fix it, use table-based layouts with defined widths and align attributes. Nest tables carefully and avoid relying on margins for positioning.
- Padding and margin inconsistencies
Outlook does not handle margins well, especially on elements like <p>, <div>, or <table>. A good workaround is to use padding instead of margin, and apply it inline. For spacing between elements, try using empty table rows or <spacer> elements.
- Fonts being not displayed properly
Outlook supports only a limited number of fonts and may fall back to Times New Roman. To avoid font issues, use web-safe fonts like Arial, Verdana, or Georgia. Always include fallback fonts in your inline style attribute.
- Buttons and rounded corners render poorly
Border-radius and custom-styled buttons often don’t appear as expected. To make buttons work better, use bulletproof buttons built with HTML tables and inline styles. Avoid relying on border-radius alone.
- Extra spacing in the layout
Word’s rendering engine sometimes adds extra spacing between elements, especially images and tables. To eliminate this, add style="display: block;" to images, and control spacing with defined line-height and font-size. Also, set cellspacing="0" and cellpadding="0" in your tables.
Need help with email CSS? Check out our complete guide on CSS in Emails.
