# 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  "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
***
## 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:
<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
<div class="cms-element-twt-modern-teaser element ...">
...
**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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/styling-a-cms-element-individually.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.