---
title: "Inline CSS plugin"
description: "takes TinyMCE documents and outputs HTML formatted according to email-friendly HTML best practices (eg inlined CSS)."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/inline-css/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/inline-css/index.md"
version: "6"
last_updated: "2023-04-06T02:03:43Z"
tokens: 1977
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/inline-css/).
# Inline CSS plugin
> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
> **Note:** This feature is only available for TinyMCE 6.3 and later.
As is normal and long-time best practice, TinyMCE documents keep CSS and HTML separate. This practice is not, however, email-friendly.
The Inline CSS plugin takes a TinyMCE document, and processes it such that the previously separate CSS is applied inline to each HTML element. This single output file is much closer to the common requirements for sending as an HTML-formatted email.
## Interactive example
**Example**
```js
const settings = {
plugins: [
'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
'preview', 'searchreplace', 'table', 'visualblocks', 'inlinecss'
],
toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_style: `
.red {
color: red;
}
.blue {
color: blue;
}
.blue-background {
background-color: blue;
}
.red-background {
background-color: red;
}
`
};
tinymce.init({
selector: 'textarea.classic',
...settings
});
const button = document.getElementById('inline-css-btn');
const outputTextArea = document.getElementById('output-text-area');
button.addEventListener('click', () => {
const pluginAPI = tinymce.get(0).plugins.inlinecss;
const outputIframe = document.getElementById('outputIframe');
const rawDoc = outputIframe.contentWindow.document;
pluginAPI.getContent().then((content) => {
outputTextArea.value = content.html;
if (rawDoc) {
rawDoc.open();
rawDoc.write(content.html);
rawDoc.close();
}
});
});
```
## Basic setup
To add the Inline CSS plugin to the editor, add `inlinecss` to the `plugins` option in the editor configuration.
For example:
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'inlinecss',
});
```
## Usage notes
The Inline CSS plugin does not support
1. [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).
For example:
```css
button:hover {
color: blue;
}
```
2. [Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).
For example:
```css
p::first-line {
color: blue;
}
```
3. [@ rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule).
For example:
```html
@media (screen)
```
4. The `!important` property.
### Classic or iframe mode support
[Classic or iframe mode](../use-tinymce-classic/) is a sandbox. Consequently, specifying CSS is constrained.
CSS can be specified in classic mode in the following ways:
1. The `content_css` option
Setting the [`content_css`](../add-css-options/#content_css) option automatically creates the `` tag and puts it in the TinyMCE document’s ``.
> **Note:** This is the only supported way of adding a stylesheet to TinyMCE in Classic mode.
2. The `content_style` option
Setting the [`content_style`](../add-css-options/#content_style) option automatically creates the `
```
5. `style` attributes applied to specific elements within a document. That is, inline CSS
> **Note:** By default, TinyMCE does not support `
```
5. A `