> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/styling-a-cms-element-individually.md).

# Styling a CMS element individually

You can style a specific CMS element individually by assigning it a custom CSS class in the element settings and defining the desired styles in your stylesheet or theme configuration.

Additionally, you can use the automatically generated [element ID](#element-id) – especially for CMS elements where assigning a custom CSS class is not possible.

***

## Adding a CSS class to a ThemeWare® CMS element

1. Click on the corresponding CMS block to activate the "edit mode"
2. Hover the mouse over the desired CMS element (1)
3. Click on the ![](/files/60vRoZ5FAhYNJAhWNQQT) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Switch to the "Advanced" tab (3)
6. Enter your own CSS class in the "CSS classes (Element)" configuration field (4)
   * **Tip**: Separate multiple classes with a space.
7. Save your changes

<figure><img src="/files/d2xJLxaPVmRmD9DicLYr" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9oGMqED14OeXlU47DgHC" alt=""><figcaption></figcaption></figure>

***

## Element-ID

Shopware automatically creates a unique element ID for each CMS element. You can use this to style the element individually using CSS - especially if no separate CSS class can be assigned.

You can find this element ID in the HTML code of the storefront. It is stored in the `data-cms-element-id` attribute of the corresponding container:

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
</strong>    &#x3C;div class="cms-element-twt-modern-teaser element ...">
    ...
</code></pre>

**To target this element via CSS**, use an attribute selector like this:

```css
[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
    /* Custom styles here */
}
```

{% hint style="info" %}
**Note:** For **ThemeWare® CMS elements**, you can also find the automatically generated element ID directly in the **element’s configuration** under the **"Advanced"** tab. This allows you to avoid manually inspecting the HTML markup in the storefront.
{% endhint %}

***

#### Further information

You can find more information on how to add CSS styles in the following instructions:

{% content-ref url="/pages/sv4AbcGPPn29g3gNgF6V" %}
[Individual customizations by means of CSS](/knowledge-base/tutorials/individual-customizations/individual-customizations-by-means-of-css.md)
{% endcontent-ref %}