---
title: "tinymce.html.Styles"
description: "This class is used to parse CSS styles. It also compresses styles to reduce the output size."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.styles/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.styles/index.md"
version: "latest"
last_updated: "2022-07-13T05:38:26Z"
tokens: 426
---
# tinymce.html.Styles

This class is used to parse CSS styles. It also compresses styles to reduce the output size.

## Examples

```javascript
const Styles = tinymce.html.Styles({
  url_converter: (url) => {
    return url;
  }
});

styles = Styles.parse('border: 1px solid red');
styles.color = 'red';

console.log(tinymce.html.Styles().serialize(styles));
```

## Summary

### Methods

| Name | Summary | Defined by |
| --- | --- | --- |
| [parse()](#parse) | Parses the specified style value into an object collection. This parser will also merge and remove any redundant items that browsers might have added. URLs inside the styles will also be converted to absolute/relative based on the settings. | `Styles` |
| [serialize()](#serialize) | Serializes the specified style object into a string. | `Styles` |

## Methods

### parse()

```javascript
parse(css: String): Object
```
Parses the specified style value into an object collection. This parser will also
merge and remove any redundant items that browsers might have added. URLs inside
the styles will also be converted to absolute/relative based on the settings.

#### Parameters

- `css (String)` - Style value to parse. For example: `border:1px solid red;`

#### Return value

- `Object` - Object representation of that style. For example: `{ border: '1px solid red' }`

### serialize()

```javascript
serialize(styles: Object, elementName: String): String
```
Serializes the specified style object into a string.

#### Parameters

- `styles (Object)` - Object to serialize as string. For example: `{ border: '1px solid red' }`
- `elementName (String)` - Optional element name, if specified only the styles that matches the schema will be serialized.

#### Return value

- `String` - String representation of the style object. For example: `border: 1px solid red`