> Markdown version of [Styling](https://vaadin.com/docs/v24/components/dialog/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-dialog-overlay`

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

- Non-modal

  `vaadin-dialog-overlay[modeless]`

- Dialog with header

  `vaadin-dialog-overlay[has-header]`

- Dialog with footer

  `vaadin-dialog-overlay[has-footer]`

- Resizable

  `vaadin-dialog-overlay[resizable]`

### <a id="parts"></a>Parts

- Modality curtain (backdrop)

  `vaadin-dialog-overlay::part(backdrop)`

- Dialog surface

  `vaadin-dialog-overlay::part(overlay)`

- Header

  `vaadin-dialog-overlay::part(header)`

- Title wrapper

  `vaadin-dialog-overlay::part(title)`

- Title element

  `vaadin-dialog-overlay > [slot="title"]`

- Header custom content wrapper

  `vaadin-dialog-overlay::part(header-content)`

- Content area

  `vaadin-dialog-overlay::part(content)`

- Footer

  `vaadin-dialog-overlay::part(footer)`