## Importing a stylesheet

Stylesheet imports are triggered via Framework’s `mail`, similarly to other features discussed in [Backend-initiated actions](https://dev.writer.com/framework/backend-initiated-actions). When the import is triggered, the front-end downloads the specified stylesheet and creates a `style` element with its contents. The `import_stylesheet` method takes the `stylesheet_key` and `path` arguments. The first works as an identifier that will let you override the stylesheet later if needed. The second is the path to the CSS file. The path specified needs to be available to the front-end, so storing it in the `/static` folder of your app is recommended. The following code imports a stylesheet when handling an event.

```
def handle_click(state):
    state.import_stylesheet("theme", "/static/custom.css")
```

In many cases, you’ll want to import a stylesheet during initialisation time, for all users. This is easily achievable via the initial state, as shown below.

```
initial_state = wf.init_state({
    "counter": 1
})

initial_state.import_stylesheet("theme", "/static/custom.css")
```

Use versions to avoid caching. During development time, stylesheets may be cached by your browser, preventing updates from being reflected. Append a querystring to bust the cache, e.g. use `/static/custom.css?3`.

## Applying CSS classes

You can use the property _Custom CSS classes_ in the Builder’s _Component Settings_ to apply classes to a component, separated by spaces. Internally, this will apply the classes to the root HTML element of the rendered component.

## Tips for effective stylesheets

The CSS code for the class used earlier, `bubblegum`, can be found below. Note how the `!important` flag is used when targeting style attributes that are configurable via the Builder. If the flag isn’t included, these declarations will not work, because built-in Framework styling is of higher specificity.

```
.bubblegum {
    background: #ff63ca !important;
    line-height: 1.5;
    transform: rotate(-5deg);
}

/* Targeting an element inside the component root element */
.bubblegum > h2 {
    color: #f9ff94 !important;
}
```

Component structure may change. When targeting specific HTML elements inside components, take into account that the internal structure of components may change across Framework versions.

Alternatively, you can override Framework’s style variables. This behaves slightly differently though; style variables are inherited by children components. For example, if a _Section_ has been assigned the `bubblegum` class, its children will also have a pink background by default.

```
.bubblegum {
    --containerBackgroundColor: #ff63ca;
    --primaryTextColor: #f9ff94;
    line-height: 1.5;
    transform: rotate(-5deg);
}
```

The class can be used in _Component Settings_. If the stylesheet is imported, the effect will be immediate. In case the stylesheet has been modified since imported, it’ll need to be imported again.

## Targeting component types

Framework components have root HTML elements with a class linked to their type. For example, _Dataframe_ components use the class _CoreDataframe_. When writing a stylesheet, you can target all _Dataframe_ components as shown below.

```
.CoreDataframe {
    line-height: 2.0;
}
```

## Implementing themes

It’s possible to switch stylesheets during runtime, by specifying the same `stylesheet_key` in subsequent calls. This allows you to implement a “theme” logic if desired, targeting the whole or a specific part of your app.

```
def handle_cyberpunk(state):
    state.import_stylesheet("theme", "/static/cyberpunk_theme.css")

def handle_minimalist(state):
    state.import_stylesheet("theme", "/static/minimalist_theme.css")
```