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

# Styling Views & Layouts with CSS

## <a id="css-theme-folder"></a>CSS Theme Folder

You can style components that extend `View` and `Layout` by placing CSS files in the `frontend/themes/<app-name>/` folder and importing them in `styles.css` using `import()`. Styles defined in the theme directory are available across the application. You can also import styles from `node_modules`, like `line-awesome` in the following example:

`frontend/themes/<app-name>/styles.css`

```css
@import "line-awesome/dist/line-awesome/css/line-awesome.min.css";

@import "./main-layout.css";
@import "./views/example-view.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.