---
title: "Content appearance options"
description: "Configure the appearance of content inside TinyMCE's editable area."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/content-appearance/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/content-appearance/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 3404
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/content-appearance/).
# Content appearance options

## `body_class`

Use the `body_class` option to add a class to the body of each editor instance. This class can be used to override the styles added by the `content_css` option. The `body_class` will be removed if the editor is removed and will not be included in any content retrieved from the editor.

**Type:** `String`

### Example: Using `body_class`

This will add the same class to all editors that gets created by the `init` call.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  body_class: 'my_class'
});
```
This will set specific classes on the bodies of specific editors.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  body_class: 'elm1=my_class, elm2=my_class'
});
```

## `body_id`

This option enables you to specify an id for the body of each editor instance. This id can then be used to do TinyMCE specific overrides in your `content_css`.

**Type:** `String`

### Example: Using `body_id`

This will add the same id to all editors that gets created by the `init` call.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  body_id: 'my_id'
});
```
This will set specific ids on the bodies of specific editors.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  body_id: 'elm1=my_id, elm2=my_id2'
});
```

## `content_css`

The `content_css` option loads the specified CSS files into the editable area.

**Type:** `String`, `Array`

> **Note:** This option is intended for use with TinyMCE’s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant CSS stylesheets should be loaded as part of the webpage TinyMCE is rendered in, not using the `content_css` option.
TinyMCE comes with four content CSS files:

- `default`
- `dark`
- `document`
- `writer`

These content CSS files can be enabled in the editor using the [`content_css` configuration option](#content_css).

For example:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'writer'
});
```
These content CSS files can also be used as a template for creating a custom content CSS file for the editor. For the CSS files, see: [tinymce-dist GitHub Repository - Content CSS files](https://github.com/tinymce/tinymce-dist/tree/master/skins/content).

Tiny also provides content CSS files with the premium skins, for a list of premium content CSS files, see: [Tiny Skins and Icon Packs](../enhanced-skins-and-icon-packs/).

Tiny recommends using the same CSS for both the editor and the page where the editor content will be rendered.

If a relative path is specified, it will be resolved in relation to the URL of the webpage TinyMCE is rendered in.

### Absolute path example

```js
// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : '/myLayout.css'  // resolved to http://domain.mine/myLayout.css
});
```

### Relative path example

```js
// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'mycontent.css'  // resolved to http://domain.mine/mysite/mycontent.css
});
```
To load multiple stylesheets, provide the paths as either a array of strings or a comma-separated string.

### Using multiple stylesheets example

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'mycontent.css,mycontent2.css'  // includes both CSS files in header
});
```

### Using multiple stylesheets as array example

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: ['mycontent.css', 'mycontent2.css']  // includes both CSS files in header, ability to have CSS with `,` in URL
});
```

### Browser caching

Browser caching might cause TinyMCE to not read the contents of a changed CSS file. You’ll see "old" colors & styles.

One solution is to manually clear the browser cache when the file for `content_css` or `editor_css` has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present time stamp like "myFile.css?bogus=10023561235". Possible solutions could look like this:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myfile.css?' + new Date().getTime()
});
```

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myscript.php?myParam=myValue&bogus=' + new Date().getTime()
});
```

## `content_css_cors`

When `content_css_cors` is set to `true`, the editor will add a `crossorigin="anonymous"` attribute to the link tags that the StyleSheetLoader uses when loading the `content_css`. This allows you to host the content_css on a different server than the editor itself.

**Type:** `Boolean`

**Default Value:** `false`

### Example: Using `content_css_cors`

```js
// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'http://www.somewhere.example/mycontent.css',
  content_css_cors: true
});
```

## `content_style`

This option allows custom CSS styles to be set as a string. The styles are injected into the `head` of the page containing the editable area. In TinyMCE’s classic mode, it is injected into the `head` of TinyMCE’s iframe. In inline mode, it is injected into the `head` of the page TinyMCE is rendered in.

**Type:** `String`

> **Note:** `content_style` styles are not saved within TinyMCE’s content. If they are needed for display purposes, ensure the styles are also included in the page the content will be displayed on.

### Example: Applying one CSS style using `content_style`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: 'div { margin: 10px; border: 5px solid red; padding: 3px; }'
});
```
To add two or more styles with this option, provide the styles as a single string.

### Example: Applying two or more CSS styles using `content_style`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: 'div { margin: 10px; border: 5px solid red; padding: 3px; } ' +
    '.blue { color: blue; } .red { color: red; }'
});
```

## `font_css`

The `font_css` option loads the specified font CSS files into both the editable area and the webpage TinyMCE is rendered in.

Font CSS files should only contain CSS for specifying custom fonts using the `@font-face` and related CSS rules.

**Type:** `String`, `Array`

> **Note:** This option is intended for use with TinyMCE’s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant font CSS files should be loaded as part of the webpage TinyMCE is rendered in, not using the `font_css` option.
If a relative path is specified, it will be resolved in relation to the URL of the webpage TinyMCE is rendered in.

### Absolute path example

```js
// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  font_css : '/myFont.css'  // resolved to http://domain.mine/myFont.css
});
```

### Relative path example

```js
// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  font_css : 'myFont.css'  // resolved to http://domain.mine/mysite/myFont.css
});
```
To load multiple font CSS files, provide the paths as either a array of strings or a comma-separated string.

### Using multiple stylesheets example

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  font_css : 'myFont.css,myFont2.css'  // includes both font CSS files in header
});
```

### Using multiple stylesheets as array example

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  font_css: ['myFont.css', 'myFont2.css']  // includes both font CSS files in header, ability to have CSS with `,` in URL
});
```

## `inline_boundaries`

The **inline_boundaries** option allows you to disable the inline boundaries. For information on how to change the appearance of the inline boundaries see the [Boilerplate Content CSS page](#general-configuration-guide/boilerplate-content-css/).

**Type:** `Boolean`

**Default Value:** `true`

**Possible Values:** `true`, `false`

### Example: Using `inline_boundaries`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline_boundaries: false
});
```

## `inline_boundaries_selector`

The **inline_boundaries_selector** option allows you specify what elements the inline boundaries should apply to. This defaults to `a[href],code,.mce-annotation` but can be extended to include other inline elements such as `b`, `strong`, `i`, and `em`.

If you add new elements, you need to add CSS selectors for them in the content CSS. See the [Boilerplate Content CSS page](#general-configuration-guide/boilerplate-content-css/) for details.

**Type:** `String`

**Default Value:** `a[href],code,.mce-annotation`

### Example: Using `inline_boundaries_selector`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline_boundaries_selector: 'a[href],code,b,i,strong,em'
});
```

## Text color options

These options affect the color selector shown when using the `forecolor` (text color) and `backcolor` (text background) toolbar buttons or menu items. The dimensions and mapping of the grid of text colors can be set here.

### `color_cols`

This option allows for specifying the number of columns for text color grids. The number of rows is calculated based on the number of text colors supplied divided by the specified number of columns.

By default, the number of rows and columns is dependent of the number of colors specified using [`color_map`](#color_map). The dimensions of the grid will be calculated by TinyMCE to keep the grid a square or a rectangle with a minimum of 5 columns.

> **Note:** The `textcolor_cols` and `textcolor_rows` properties have been removed in TinyMCE 5.
**Type:** `Integer`

#### Example: Using `color_cols`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_cols: 5
});
```

### `color_map`

This option allows specifying a map of the text colors that will appear in the grid.

**Type:** `Array`

#### Example: Using `color_map`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_map: [
    '000000', 'Black',
    '808080', 'Gray',
    'FFFFFF', 'White',
    'FF0000', 'Red',
    'FFFF00', 'Yellow',
    '008000', 'Green',
    '0000FF', 'Blue'
  ]
});
```

#### The default color_map

```js
color_map: [
  '#BFEDD2', 'Light Green',
  '#FBEEB8', 'Light Yellow',
  '#F8CAC6', 'Light Red',
  '#ECCAFA', 'Light Purple',
  '#C2E0F4', 'Light Blue',

'#2DC26B', 'Green',
  '#F1C40F', 'Yellow',
  '#E03E2D', 'Red',
  '#B96AD9', 'Purple',
  '#3598DB', 'Blue',

'#169179', 'Dark Turquoise',
  '#E67E23', 'Orange',
  '#BA372A', 'Dark Red',
  '#843FA1', 'Dark Purple',
  '#236FA1', 'Dark Blue',

'#ECF0F1', 'Light Gray',
  '#CED4D9', 'Medium Gray',
  '#95A5A6', 'Gray',
  '#7E8C8D', 'Dark Gray',
  '#34495E', 'Navy Blue',

'#000000', 'Black',
  '#ffffff', 'White'
]
```

### `custom_colors`

This option allows disabling the custom color picker in all color swatches of the editor.

**Type:** `Boolean`

**Default Value:** `true`

#### Example: Using `custom_colors`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  custom_colors: false
});
```

## `visual`

This true/false option gives you the ability to enable or disable the `visual` aid.

This setting also allows `visual` aid to override the `Menu` settings. For instance, you can enable or disable `visual` aid even if the `Menu` is set to `False`.

If the border of a table is set to `0`, then TinyMCE adds a dotted line around the table by default.

**Type:** `Boolean`

**Default Value:** `true`

**Possible Values:** `true`, `false`

### Example: Using `visual`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HRML
  visual: false
});
```

## `visual_anchor_class`

This option enables you to configure a custom class to be added to anchors with names since these are invisible by default.

**Type:** `String`

### Example: Using `visual_anchor_class`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  visual_anchor_class: 'my-custom-class'
});
```

## `visual_table_class`

This option enables you to configure a custom class to be added to tables that have a border set to `0`. This class is used to add dotted borders to tables that would otherwise be invisible for the user.

**Type:** `String`

### Example: Using `visual_table_class`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  visual_table_class: 'my-custom-class'
});
```