---
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/5/apis/tinymce.html.styles/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 640
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../../latest/apis/tinymce.html.styles/).
# tinymce.html.Styles

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

## Examples

```javascript
var Styles = new tinymce.html.Styles({
   url_converter: function(url) {
      return url;
   }
});

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

console.log(new 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. It will also convert non hex colors to hex values. Urls inside the styles will also be converted to absolute/relative based on settings. | `Styles` |
| [serialize()](#serialize) | Serializes the specified style object into a string. | `Styles` |
| [toHex()](#toHex) | Parses the specified RGB color value and returns a hex version of that color. <br> *Deprecated in TinyMCE 5.10 and has been marked for removal in TinyMCE 6.0.* | `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. It will also convert non hex
colors to hex values. Urls inside the styles will also be converted to absolute/relative based on settings.

#### Parameters

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

#### Return value

- `Object` - Object representation of that style like {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.

### toHex()

```javascript
toHex(color: String): String
```
Parses the specified RGB color value and returns a hex version of that color.

*Deprecated in TinyMCE 5.10 and has been marked for removal in TinyMCE 6.0.*

#### Parameters

- `color (String)` - RGB string value like rgb(1,2,3)

#### Return value

- `String` - Hex version of that RGB value like #FF00FF.