---
url: https://docs.youcan.shop/themes/tags/style.md
---

# `style`

Generate an HTML `<style>` tag that contains your css rules. The generated tag will have a `data-youcan` data attribute.

So far there is no real benefit to using this tag other than to keep your liquid consistent by using liquid like syntax.

```liquid
{% style %}
  CSS_rules
{% endstyle %}
```

* `CSS_rules`: Your set of `CSS` rules you wish to apply.

**Example:**

::: details Data

```json
{
  "section": {
    "settings": {
      "banner_background_position": "center"
    }
  }
}
```

*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::

```liquid
{% style %}
  .banner {
    background-position: {{- sections.settings.banner_background_position -}};
  }
{% endstyle %}
```

::: tip Output

```html
<style data-youcan>
  .banner {
    background-position: center;
  }
</style>
```

:::