> Markdown version of [CSS Loading Order](https://vaadin.com/docs/v24/flow/advanced/css-loading-order). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# CSS Loading Order

A [theme](https://vaadin.com/docs/v24/styling.md) is the recommended way to organize styles in a Vaadin application. However, the other ways to import styles, namely the `@CSSImport` and `@StyleSheet` annotations, are still supported. Styles applied with different approaches have different loading orders. That is, their priorities are computed in the browser and possibly override each other.

To keep the application theming and styles consistent and well formed, it’s important to consider the loading order of the following CSS sources:

1. The `Lumo` theme.

2. Application-specific bundled CSS added with a \`@CssImport'.

3. Styles added on the Java side via `Page::addStylesheet()`.

4. Application-specific unbundled CSS added with `@StyleSheet`.

5. Parent theme.

6. Current theme.

> **Note:** The `Lumo` theme isn’t loaded and applied if another theme class is provided (for example, `@Theme(themeClass = MyCustomTheme.class)`), or if the `@NoTheme` annotation is used.

The parent theme is an existing theme whose styles and variables the current theme inherits.

The "current theme" is the theme used in your application. It can be a theme created locally or packaged as a `JAR` dependency. See [Application Theme](https://vaadin.com/docs/v24/styling/application-theme.md) and [Using a Theme in Multiple Applications](https://vaadin.com/docs/v24/styling/advanced/multi-app-themes.md) for more information.

Styles with a higher loading order have a higher precedence. For example, the following style, if placed in `global.css` within the theme folder `frontend/themes/my-theme`, overrides the default `Lumo` font size `1rem` with `0.875rem`:

```css
html {
    --lumo-font-size-m: 0.875rem;
}
```

> **Warning:** By default, a [loading indicator](https://vaadin.com/docs/v24/flow/advanced/loading-indicator.md) is shown at the top of the viewport after a delay. If a theme modifies the loading indicator style, the new style is applied in the middle of the loading progress. To avoid this, the style for the loading indicator should be defined in `frontend/index.html` explicitly using the `.v-loading-indicator` CSS selector.

`150CF4BB-648C-40E8-B631-0152059D95C8`