> Markdown version of [Styling](https://vaadin.com/docs/v24/components/rich-text-editor/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-rich-text-editor`

### <a id="states"></a>States

- Read-only

  `vaadin-rich-text-editor[readonly]`

- Disabled

  `vaadin-rich-text-editor[disabled]`

- Hovered

  `vaadin-rich-text-editor:hover`

### <a id="toolbar"></a>Toolbar

- Toolbar

  `vaadin-rich-text-editor::part(toolbar)`

- Toolbar button groups

  `vaadin-rich-text-editor::part(toolbar-group)`

- History button group

  `vaadin-rich-text-editor::part(toolbar-group-history)`

- Toolbar buttons

  `vaadin-rich-text-editor::part(toolbar-button)`

- Toolbar button toggled on

  `vaadin-rich-text-editor::part(toolbar-button-pressed)`

- Undo button

  `vaadin-rich-text-editor::part(toolbar-button-undo)`

- Redo button

  `vaadin-rich-text-editor::part(toolbar-button-redo)`

- Emphasis button group

  `vaadin-rich-text-editor::part(toolbar-group-emphasis)`

- Bold button

  `vaadin-rich-text-editor::part(toolbar-button-bold)`

- Italic button

  `vaadin-rich-text-editor::part(toolbar-button-italic)`

- Underline button

  `vaadin-rich-text-editor::part(toolbar-button-underline)`

- Strikeout button

  `vaadin-rich-text-editor::part(toolbar-button-strike)`

- Style button group (since undefined)

  `vaadin-rich-text-editor::part(toolbar-group-style)`

- Text color button (since undefined)

  `vaadin-rich-text-editor::part(toolbar-button-color)`

- Background button (since undefined)

  `vaadin-rich-text-editor::part(toolbar-button-background)`

- Heading button group

  `vaadin-rich-text-editor::part(toolbar-group-heading)`

- H1 button

  `vaadin-rich-text-editor::part(toolbar-button-h1)`

- H2 button

  `vaadin-rich-text-editor::part(toolbar-button-h2)`

- H3 button

  `vaadin-rich-text-editor::part(toolbar-button-h3)`

- Glyph transformation button group

  `vaadin-rich-text-editor::part(toolbar-group-glyph-transformation)`

- Subscript button

  `vaadin-rich-text-editor::part(toolbar-button-subscript)`

- Superscript button

  `vaadin-rich-text-editor::part(toolbar-button-superscript)`

- List button group

  `vaadin-rich-text-editor::part(toolbar-group-list)`

- Ordered list button

  `vaadin-rich-text-editor::part(toolbar-button-list-ordered)`

- Bullet list button

  `vaadin-rich-text-editor::part(toolbar-button-list-bullet)`

- Alignment button group

  `vaadin-rich-text-editor::part(toolbar-group-alignment)`

- Align left button

  `vaadin-rich-text-editor::part(toolbar-button-align-left)`

- Align center button

  `vaadin-rich-text-editor::part(toolbar-button-align-center)`

- Align right button

  `vaadin-rich-text-editor::part(toolbar-button-align-right)`

- Rich content button group

  `vaadin-rich-text-editor::part(toolbar-group-rich-text)`

- Image button

  `vaadin-rich-text-editor::part(toolbar-button-image)`

- Link button

  `vaadin-rich-text-editor::part(toolbar-button-link)`

- Text block button group

  `vaadin-rich-text-editor::part(toolbar-group-block)`

- Block quote button

  `vaadin-rich-text-editor::part(toolbar-button-blockquote)`

- Code block button

  `vaadin-rich-text-editor::part(toolbar-button-code-block)`

- Format button group

  `vaadin-rich-text-editor::part(toolbar-group-format)`

- Clean formatting button

  `vaadin-rich-text-editor::part(toolbar-button-clean)`

### <a id="content"></a>Content

- Content area

  `vaadin-rich-text-editor::part(content)`