> Markdown version of [Styling Other UI Elements](https://vaadin.com/docs/v24/styling/styling-other-elements). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# Styling Other UI Elements

Native HTML elements like `div`s and `span`s, as well as Vaadin layouts like [Vertical Layout](https://vaadin.com/docs/v24/components/vertical-layout.md) and [Form Layout](https://vaadin.com/docs/v24/components/form-layout.md), can be styled in two ways: by applying CSS to them, and with Lumo utility classes.

## <a id="applying-css-to-other-ui-elements"></a>Applying CSS to Other UI Elements

You can apply CSS class names to any UI element and write CSS with corresponding selectors, like you do with Vaadin components.

**Flow**

```java
Div appHeader = new Div();
appHeader.addClassName("app-header");
```

**React**

```tsx
<div className="app-header">
```

**Lit**

```html
<div class="app-header">
```

```css
.app-header {
  background: var(--lumo-primary-color);
  color: white;
  display: flex;
}
```

## <a id="styling-with-lumo-utility-classes"></a>Styling with Lumo Utility Classes

[Lumo Utility Classes](https://vaadin.com/docs/v24/styling/lumo/utility-classes.md) are predefined CSS class names and stylesheets – similar to the popular Tailwind CSS library – that can be used to style HTML elements and layouts without writing CSS yourself. Each utility class applies a particular style to the element, such as background color, borders, fonts, sizing, or spacing. Classes for applying CSS flexbox and grid layout features are also available.

Utility classes are applied similarly to custom CSS class names. The `LumoUtility` class in Flow has constants for all utility classes.

**Flow**

```java
Div appHeader = new Div();
appHeader.addClassNames(LumoUtility.Background.PRIMARY, LumoUtility.TextColor.PRIMARY_CONTRAST, LumoUtility.Display.FLEX);
```

**React**

```tsx
<div className="bg-primary text-primary-contrast flex">
```

**Lit**

```html
<div class="bg-primary text-primary-contrast flex">
```

> **Note:** Lumo Utility Classes are for HTML elements, not for Vaadin components. The Lumo utility classes are primarily designed to be used with native HTML elements, Vaadin layout components and custom UI structures. Although some of them do work as expected on some Vaadin components, this is not their intended use. They especially cannot be used to style the inner parts of components.