# StyleConfig

interface

The configuration of the style feature.

```typescript
ClassicEditor
  .create( {
	style: ... // Style feature config.
  } )
  .then( ... )
  .catch( ... );
```

See [all editor options](module_core_editor_editorconfig-EditorConfig.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-style/src/styleconfig.ts#L24)

<a id="properties">

## Properties

<a id="member-definitions">

### `definitions?: Array<StyleDefinition>`

The available style definitions.

Style definitions are displayed in the `'style'` UI dropdown and get applied by the [style command](module_style_stylecommand-StyleCommand.md) to the content of the document.

In the `'style'` UI dropdown, definitions are automatically grouped into two categories based on the of the `element` property:

* **Block styles**: Can be applied to entire [block elements](module_html-support_dataschema-DataSchema.md#function-registerBlockElement) only (e.g. headings, paragraphs, divs).
* **Text styles**: Can by applied to any [text](module_html-support_dataschema-DataSchema.md#function-registerInlineElement) in any element in the document.

An example configuration:

```typescript
[
  // Definitions of block styles.
  {
	name: 'Red heading',
	element: 'h2',
	classes: [ 'red-heading' ]
  },
  {
	name: 'Vibrant code',
	element: 'pre',
	classes: [ 'vibrant-code' ]
  },

  // Definitions of text (inline) styles.
  {
	name: 'Marker',
	element: 'span',
	classes: [ 'marker' ]
  },

  // ...
]
```

**Note**: Configuring style definitions will automatically configure the [General HTML Support feature](../features/html/general-html-support.md). **You do not need to repeat the configuration in [`GeneralHtmlSupportConfig`](module_html-support_generalhtmlsupportconfig-GeneralHtmlSupportConfig.md)**.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-style/src/styleconfig.ts#L70)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)