> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom CSS

# Getting Started

You can customize the style of any section, container, or element using the **Custom CSS** feature. This article provides an introduction to this feature and guides you through its use.

---

# How to Access the Custom CSS Option?

To access it, open the editorial modal of the section/container/row/column/element. Click on the **Advanced** tab, and scroll down to find the **Custom CSS** option.

1. Click on the **Edit(📝)** option of any section/container/row/column/element. An Editor modal will open then.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1rzu21y.png)
    
    

2. Go the **Advanced** tab from that modal.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_19v2alx.png)


3. Scroll down to find the `Custom CSS` option and expand it. Within this section, you have the option to add:
    - **General CSS**: Change how the selected thing looks.
    - **'Before' CSS**: Add stuff before the selected thing.
    - **'After' CSS**: Add stuff after the selected thing.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_w728am.png)


| 🚨 Refer to the demo CSS code pattern written in the CSS fields to understand the required format for writing CSS code in this field.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_11gvlv8.png)



||| 💡 The custom CSS option applies only to the specific section, container, or element you select. You cannot reference other elements within it.


---

# Related articles

[Advanced tab in Editor](/en/article/advanced-tab-in-editor-1y2imp1/)

[Changing Site language](/en/article/changing-site-language-1a4vk4w/)