CSS to Inline Styles
Convert CSS rules to inline styles for email templates.
About the CSS to Inline Styles
The CSS to Inline Styles Converter transforms HTML that uses CSS classes into HTML with all styles applied inline via the style attribute. This is essential for HTML email — most email clients (Gmail, Outlook, Yahoo) strip <style> tags from the <head> and only honor inline styles on each element. Without inlining, your carefully crafted email looks broken in 60% of inboxes.
Inline styles also matter for embedding HTML in CMS rich-text editors (which often strip <style> tags for security), for static page fragments loaded without a stylesheet, and for HTML fragments shared via copy-paste where the recipient may not have the CSS file. Converting class-based styles to inline styles preserves the visual design without requiring the recipient to load an external stylesheet.
The tool parses simple CSS rules (class selectors only — .card { padding: 20px; }) and applies them to matching class= attributes in the HTML. Each element with a class gets the corresponding styles merged into its style attribute. Elements with multiple classes get the combined styles of all their classes.
How It Works
The tool parses the CSS using a regex that matches class rules: /\.([a-zA-Z0-9_-]+)\s*\{([^}]+)\}/g. For each match, the class name and the properties (the content between { and }) are extracted and stored in a lookup object. Multiple rules for the same class are concatenated.
The HTML is then scanned for class='...' or class="..." attributes using /class\s*=\s*['"]([^'"]+)['"]/g. For each match, the class list is split on whitespace, and each class is looked up in the rules object. The matching styles are joined with spaces and wrapped in a style="..." attribute that replaces the original class= attribute.
Elements with multiple classes (like class='card highlight') get the combined styles of both classes. If a class is not found in the CSS, it is silently ignored. The order of styles in the output matches the order of classes in the HTML, which matters for cascading (later declarations override earlier ones).
Worked Examples
The default input is a card with two classes (card highlight) containing a title and body. Converting produces <div style="padding: 20px; border: 1px solid #ccc; background: #fffde7;"> — the styles from both .card and .highlight are merged. The <h2 class='title'> becomes <h2 style="font-size: 24px; color: #333;">, and the <p class='body'> becomes <p style="color: #666; line-height: 1.5;">.
For an HTML email template, you would write the entire email with class-based CSS for maintainability, then run it through this tool to inline all styles before sending. The result is HTML that renders correctly in Gmail, Outlook, and other restrictive clients without needing a <style> tag.
If you have a class that appears on many elements (like .btn), the tool applies the button styles to every element with that class. This is exactly what email clients need — each <a class='btn'> link gets the full button styling inline, so it renders correctly even when the <style> block is stripped.
When to Use This Tool
- Preparing HTML email templates for Gmail, Outlook, and other restrictive email clients.
- Embedding HTML fragments in CMS rich-text editors that strip <style> tags.
- Creating standalone HTML snippets that do not require an external stylesheet.
- Generating HTML for copy-paste into tools that ignore CSS classes.
- Converting design system component markup to portable inline-styled HTML.
- Preparing HTML for static page generators that do not process stylesheets.
- Migrating class-based HTML to inline-styled HTML for legacy systems.
Limitations & Disclaimer
This tool handles only simple class selectors (.classname) — it does not support descendant selectors, ID selectors, tag selectors, attribute selectors, pseudo-classes, pseudo-elements, or media queries. It does not merge with existing inline style attributes (it replaces the class attribute entirely). It does not handle specificity or cascade rules correctly (later rules in the CSS do not automatically override earlier ones in the same property). For full CSS-to-inline conversion (used by professional email template workflows), use a library like juice (Node.js), premailer (Ruby), or the inlining feature of email service providers. See our disclaimer for full terms.
Frequently Asked Questions
Does this tool handle descendant selectors like '.card .title'?
No. This tool handles only simple class selectors (<code>.classname</code>). Descendant selectors, ID selectors, tag selectors, pseudo-classes, and media queries are not supported. For full CSS-to-inline conversion with these features, use a dedicated library like juice (Node.js) or premailer (Ruby).
What happens to existing inline styles?
Existing <code>style=</code> attributes are preserved — the tool does not overwrite or merge with them. If an element has both a <code>class</code> and a <code>style</code>, the class-based styles replace the class attribute but the existing style attribute remains separate. To merge them, you would need a more sophisticated tool that parses both.
Does the tool support ID selectors like '#header'?
No. The tool only matches class selectors (starting with <code>.</code>). ID selectors, attribute selectors, tag selectors, and pseudo-classes are not supported. This is a deliberate simplification for the common email-inlining use case where most styling is class-based.
Why are my media queries not applied?
Media queries cannot be inlined because they require a <code>@media</code> rule wrapping multiple declarations. Email clients that support media queries (some modern clients do) require the <code><style></code> block to remain. The standard practice is to inline the desktop styles and keep a <code><style></code> block for responsive overrides.
What about pseudo-elements like ::before and ::after?
These cannot be inlined because they generate content that is not part of the HTML. Email clients that support them (rare) require the <code><style></code> block. Most email clients ignore pseudo-elements entirely, so avoid relying on them for email.
Is my HTML or CSS uploaded anywhere?
No. All processing happens in your browser using JavaScript. Your email templates and proprietary styles never leave your device, which is important for marketing teams handling confidential campaigns.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team