Email CSS Inliner

Convert <style> blocks to inline CSS for maximum email client compatibility.

  1. Home
  2. Email
  3. Email CSS Inliner
0 chars | 0 lines

What is Email CSS Inliner?

Email CSS inlining is the process of converting <style> blocks in HTML email markup to inline style attributes on individual elements. This is necessary because many email clients (like Gmail, Outlook, and Yahoo) strip <style> tags or ignore them, requiring styles to be applied directly to each element.

This tool automatically parses your HTML, extracts CSS rules from <style> blocks, and applies them to matching elements. It supports class selectors, element selectors, descendant selectors, and handles the !important flag. Media queries are preserved in <style> tags for responsive email design.

How to Use

  1. Paste HTML — Paste your HTML email markup that includes <style> blocks in the head section.
  2. Toggle Options — Choose whether to remove <style> tags after inlining (recommended for email clients that strip them).
  3. Click Inline CSS — The tool processes the HTML and applies all styles directly to each element.
  4. Copy or Download — Copy the inlined HTML or download it. The output is ready for use in email campaigns.

Frequently Asked Questions

Why do email styles need to be inlined?

Email clients like Gmail (web), Outlook (Windows), and Yahoo strip <style> blocks from email HTML for security reasons. By moving styles to inline style attributes, you ensure your email renders correctly across all major email clients. This is a standard practice in email marketing.

What CSS selectors are supported?

The tool supports class selectors (.class), element selectors (div, p, a), descendant selectors (div p), and multiple classes. Pseudo-classes (:hover, :active) are preserved in the <style> tag but not inlined. Media queries for responsive email design are kept in the <style> tag even when "Remove <style> tags" is unchecked."

Should I keep <style> tags after inlining?

It depends on your email strategy. Keeping <style> tags is beneficial for email clients that do support them (like Apple Mail) because they can use the styles as fallback. However, for maximum compatibility, most email developers remove the <style> tags after inlining. This tool lets you choose.

Apakah data saya disimpan?

No. Semua proses terjadi di browser Anda. Data tidak pernah dikirim ke server.