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

# Styling HTML Elements

Native HTML elements, like `<div>` and `<span>`, can be styled the way you would normally style HTML: with CSS and [utility classes](https://vaadin.com/docs/latest/styling/utility-classes.md). CSS class names are typically used to target specific instances of HTML elements.

**Flow**

```java
var warningBox = new Div("Warning!");
warningBox.addClassNames("warning-message");
```

**React**

```tsx
<div className="warning-message">Warning!</div>
```

```css
.warning-message {
  background-color: #ff8904;
}
```

[Utility classes](https://vaadin.com/docs/latest/styling/utility-classes.md) like Tailwind CSS or Lumo Utility Classes can be applied directly to HTML elements:

**Flow**

```java
var warningBox = new Div("Warning!");
warningBox.addClassNames("bg-orange-400 p-20");
```

**React**

```tsx
<div className="bg-orange-400 p-20">Warning!</div>
```

[Inline styles](https://vaadin.com/docs/latest/styling.md#inline-styles) can also be applied to individual elements and components.

**Flow**

```java
var warningBox = new Div("Warning!");
warningBox.getStyles().setBackground("#ff8904");
```

**React**

```tsx
<div style={{ backgroundColor: '#ff8904' }}>Warning!</div>
```

[Theme style properties](https://vaadin.com/docs/latest/styling/styling-components.md#theme-style-properties) can be used to apply theme styles to any HTML element:

```css
.warning-message {
  background-color: var(--lumo-warning-color);
}
```

`e85f0b5a-a8f2-41c5-94ed-918f122a4eb9`