---
title: "Add a style for a rendering"
slug: "add-a-style-for-a-rendering"
abstract: "How to add a style class item and make it available for a rendering."
---
# Add a style for a rendering

SXA comes with preset styles for renderings. However, sometimes you may want to add your own custom styles. For example, you want some of the images on your site to appear without margins or if you want to add a background color to a rendering.

To add a class item for a rendering in the Content Editor:

1. Go to the site's **Presentation** folder.
2. Right-click **Styles**, click **Insert,** and then click **Style** to add a new style.
3. Enter the name and click **OK**.

    > [!note]
    > Make sure that your new style has a name that helps other users to understand what it does.

4. To make the new style available for the rendering, in the **Style** section, click **Edit**.

    ![663F128991B442FAA9C465D33F9E010F.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/93/sitecore-experience-accelerator/images/663F128991B442FAA9C465D33F9E010F.png)

5. In the **Select items** dialog, click the relevant rendering, click the right arrow ![6F16BFE47A894D598F5616AD24221271.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/93/sitecore-experience-accelerator/images/6F16BFE47A894D598F5616AD24221271.png) to move it to the list of selected items and click **OK**. For this example, the grey background is made available for the Container and splitter renderings.

    ![44410E213D4A4DDAB89AFED7BD75B033.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/93/sitecore-experience-accelerator/images/44410E213D4A4DDAB89AFED7BD75B033.png)

6. To see your new style, in the Experience Editor, click edit the style.

    ![F10EE8620F724194860347943BA5CC7B.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/93/sitecore-experience-accelerator/images/F10EE8620F724194860347943BA5CC7B.png)

7. In the Styles section, you can now select the new style.

    ![F95416F98A7C4CDF993D238F9FF31BE4.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/93/sitecore-experience-accelerator/images/F95416F98A7C4CDF993D238F9FF31BE4.png)

8. Click **OK** to apply the new style to the rendering.