> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.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).

# Adding CSS classes to elements on your site

You can add up to 5 **class** attribute values ​​to almost every element on your site. You can use CSS classes to change elements you need by adding CSS code.

| ${color}[#1aa900](Tip:) You can add the CSS code to your website using [this guide](https://help.weblium.com/en-us/article/adding-your-own-css-to-the-site-giuxxc/). Adding code is only available for sites with a Pro subscription.

${youtube}[Adding CSS classes to elements | Weblium website builder](homlD1cP9l8)

# Adding CSS classes
You can add CSS classes to most of the elements on your website: buttons, images, icons, text, site menu, contact forms, etc. To do this, follow these steps:
1. Open the settings for the desired element. Examples of opening settings:

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

2. Go to the **Advanced** tab and enter the desired class name for the element in the **CSS class names** section's field:

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

||| ${color}[#f97700](Important:) Every CSS class must start with the "wl-" prefix (without quotes). It is necessary to distinguish your custom classes from those our platform uses.
|| ${color}[#ffa800](Note:) The minimum length of a class name is 4 characters (together with the "wl-" prefix), and the maximum length is 25 characters.

3. You can add more CSS classes to an element using the **Add class** button:

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

|| ${color}[#ffa800](Note:) You can add a maximum of 20 CSS classes to a single element.

4. Done! You can now use this CSS class while [adding custom code](https://help.weblium.com/en-us/article/adding-your-own-code-to-the-site-1f6tdsv/) to your site. For example:

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

[Publish](https://help.weblium.com/en-us/article/publishing-a-site-tgxmch/) your site for the changes to appear live.

|| ${color}[#ffa800](Note:) Our support team does not assist with creating or editing your code. We can only provide you with guides on embedding the code on your website.