Good for HTML email
Inlining rules can improve compatibility with email clients that limit external stylesheets.
CSS Inliner
Convert stylesheet rules into inline style attributes for email templates and single-file pages.
CSS Inliner
CSS inliner tool
The CSS inliner matches HTML elements with browser selectors and writes declarations into style attributes. It supports tags, classes, IDs, descendant selectors, attribute selectors, existing inline styles, and optional style-tag removal. It is useful for HTML email, offline pages, single-file documents, and portable templates.
Respect cascade order
Rules are applied in CSS order, existing inline style is merged last, and important declarations retain priority.
Clear limitations
Nested at-rules such as media, supports, and keyframes are not inlined as ordinary selectors and are reported.
How to use
- Paste HTML and CSS, or leave CSS empty to read style elements from the HTML.
- Choose whether to keep style tags and DOCTYPE, then inline the CSS.
- Check the generated style attributes, then copy or download the standalone HTML.
FAQ
Why are media rules not put into style?
Media queries and keyframes need to remain CSS rules; putting them on each element would change their meaning. The tool inlines ordinary selectors and warns about these rules.
Are scripts executed?
No. HTML is parsed with DOMParser and scripts are not executed by the conversion. Review any scripts in the output in your own project environment.
Recommended utilities
You may also need these file utilities
Inline CSS and JavaScript
Embed external CSS and JavaScript resources into HTML to create a portable single-file webpage.
HTML Formatter
Format HTML tags, indentation, and line breaks to make minified or messy code easier to read.
Live HTML Preview
Run HTML, CSS, and JavaScript in the browser and preview webpage changes instantly.