> Markdown version of [Styling](https://vaadin.com/docs/next/hilla/guides/styling). Section index: [llms.txt](https://vaadin.com/docs/next/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 apps typically use either the [Lumo or Aura theme](https://vaadin.com/docs/next/styling/themes.md) as a base for component and application styling. Both themes are based on a set of CSS custom properties that you can use to achieve a consistent look and feel across applications.

You can use these properties 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);
}
```

The [Styling section](https://vaadin.com/docs/next/styling.md) provides more information about styling Vaadin applications.