Custom CSS lets you add custom code to your site, giving it a unique look and feel.
What is CSS?
CSS (Cascading Style Sheets) is a way to add styling to your web page – things like colors, fonts, spacing and positioning. One of the great things about the Elementor Editor is that it allows you to add many of these styling elements without knowledge of CSS. However, Elementor Pro also allows web creators with CSS knowledge to add custom CSS, giving their pages a unique look and feel.
Tip: Users without CSS knowledge can use Elementor AI to generate CSS using the custom CSS feature.
Where can you add Custom CSS with Elementor?
The Elementor Editor allows you to add Custom CSS at three different levels:
- Site Level: adding custom CSS here will affect your entire site
- Page Level: adding custom CSS here will only affect a specific page
- Element Level: adding custom CSS here will only affect a specific element
Custom CSS Examples
| Where the code is entered | Insert this code | Effect the CSS will have |
| Site Settings panel | body { | Gives all the pages on your site a red background |
| Page Settings panel | body { | The page background blue. Note: This page-level CSS overrides any site-level CSS settings, so even if you used the site CSS described above, this page would still have a blue background |
| Advanced tab of the element. | #my-element { | This targets a specific element, with the CSS ID `my-element` and gives it a green background. Note: This CSS overrides any site-level or page-level CSS to give the element a green background, so even if you used the site and/or page CSS described above, this page would still have a blue background. |
Related articles
- Custom CSS in Elementor
- How to add Custom CSS
- CSS selectors in Elementor
- CSS classes in Elementor
