> Markdown version of [Styling](https://vaadin.com/docs/v24/hilla/guides/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/hilla/llms.txt)

# How to style forms and elements in Hilla

## <a id="styling-components-with-css"></a>Styling Components with CSS

You can import CSS files directly, either plain files or CSS modules, with the `import()` method. You can place the files anywhere in your application. The sample below has them in `views` folder for simplicity.

`frontend/views/HelloWorld.tsx`

```tsx
import './HelloWorld.css';
import css from './HelloWorld.module.css';
```

## <a id="using-css-variables"></a>Using CSS Variables

Hilla uses the [Vaadin Lumo theme](https://vaadin.com/docs/latest/styling/lumo) as a base for component and application styling. Lumo is based on a set of CSS custom properties (variables) that you can use to achieve a consistent look and feel across applications. You can find the properties in the Vaadin styling documentation:

- [Typography](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/typography)

- [Color](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/color)

- [Size and Space](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/size-space)

- [Shape](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/shape)

- [Elevation](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/elevation)

- [Interaction](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/interaction)

You can use the variables in place of hard-coded units using `var()`.

```css
.card {
  border: 1px solid var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-s);
  box-shadow: var(--lumo-box-shadow-s);
}
```