External CSS to Inline Styles

⭐ What is CSS to Inline Styles?

The CSS to Inline Styles converter transforms external CSS rules into inline style attributes applied directly to HTML elements. This process is essential for email templates, legacy systems, and environments where external stylesheets cannot be used or are not supported.

🔎 Why Convert CSS to Inline Styles?

Many email clients strip out external stylesheets and <style> tags from HTML emails. By converting CSS to inline styles, you ensure your styling is preserved in:

• Email templates: Most email clients (Gmail, Outlook, Apple Mail) ignore external CSS
• Legacy systems: Older applications that don't support stylesheets
• Content management systems: Some CMS platforms restrict external resources
• Sandboxed environments: Security-restricted contexts where external resources are blocked
• Web-based forms: HTML snippets that need self-contained styling

⚙️ How the Converter Works

The tool follows these steps:

1. Extract CSS: Automatically extracts CSS from <style> tags in your HTML (if enabled)
2. Parse CSS: Extracts selectors and style declarations from CSS code
3. Match HTML elements: Uses CSS selectors to identify matching HTML elements
4. Apply styles: Converts matched CSS rules into inline style attributes
5. Merge styles: Preserves existing inline styles and merges them with new ones
6. Clean output: Optionally removes <style> tags from the result
7. Output HTML: Returns clean HTML with all styles inlined

✅ Supported CSS Selectors

The converter supports the most common CSS selector types:

• Element selectors: p, div, h1
• Class selectors: .button, .highlight
• ID selectors: #header, #footer
• Compound selectors: p.intro, div#main
• Multiple classes: .btn.btn-primary
• Attribute selectors: [type="button"]

Note: Complex selectors like pseudo-classes (:hover, :focus), pseudo-elements (::before), and descendant/child selectors are partially supported or converted to simpler matching rules.

🏷️ Working with Style Tags

The converter has two options for handling <style> tags embedded in your HTML:

• Extract <style> tags: When enabled (default), the tool automatically finds and uses any CSS inside <style> tags. This CSS is merged with any CSS you paste directly.
• Remove <style> tags: When enabled, the tool strips out all <style> tags from the final output, leaving only inline styles on elements.

Example: If your HTML contains:

<style>
  .title { color: blue; font-size: 24px; }
  p { color: gray; }
</style>
<h1 class="title">Hello</h1>

With extract enabled, the styles are automatically applied. With remove enabled, the output will have no <style> tag but the styles will be inlined on the <h1> element.

📝 CSS Properties Supported

All standard CSS properties are supported, including:

• Colors and backgrounds: color, background, background-color
• Typography: font-size, font-weight, line-height, text-align
• Box model: margin, padding, border, border-radius
• Positioning: display, position, top, left, width, height
• Effects: box-shadow, text-shadow, opacity
• And many more...

⚠️ Important Limitations & Considerations

• Pseudo-classes not inlined: Rules like a:hover, input:focus cannot be converted to inline styles. Consider adding fallback CSS in a <style> tag if needed.
• Media queries ignored: @media rules are skipped during conversion.
• Animation & keyframes: @keyframes and animations cannot be inlined.
• Font-face: Custom @font-face rules are not processed.
• Specificity: The converter applies styles in the order CSS rules appear. Later rules override earlier ones.
• Performance: Very large HTML documents or complex CSS may take longer to process.

📧 Email Template Best Practices

When preparing HTML for email clients:

1. Use simple, widely-supported CSS properties (avoid vendor prefixes)
2. Test your email in multiple email clients after conversion
3. Keep your HTML structure simple and semantic
4. Avoid nested tables; use modern HTML layout patterns
5. Include a fallback plain-text version for accessibility
6. Keep colors explicit (no CSS variables or calculated colors)

🔒 Privacy & Security

All processing runs entirely in your browser using client-side JavaScript. Your HTML and CSS are never uploaded to our servers and remain completely private.

💡 Example Usage

Before:

<html>
<head>
  <style>
    .title { color: blue; font-size: 24px; }
    p { color: gray; line-height: 1.6; }
  </style>
</head>
<body>
  <h1 class="title">Hello</h1>
  <p>This is a paragraph.</p>
</body>
</html>

After Conversion:

<html>
<head></head>
<body>
  <h1 class="title" style="color: blue; font-size: 24px;">Hello</h1>
  <p style="color: gray; line-height: 1.6;">This is a paragraph.</p>
</body>
</html>