---
title: "How to Add Custom CSS to Elementor Column/Section or Widget?"
url: https://theplusaddons.com/docs/custom-css-in-elementor/
date: 2024-01-05
modified: 2026-04-10
author: "Aditya Sharma"
description: "Do you want to customize the look and feel of your Elementor website beyond the options provided by the widgets? This is where custom CSS comes into play, which can..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-Custom-CSS-to-Elementor-Column-or-Section-or-Widget_-1024x536.jpg
word_count: 343
---

# How to Add Custom CSS to Elementor Column/Section or Widget?

## Key Takeaways

- The Plus Addons for Elementor allows users to add custom CSS to specific sections, inner sections, containers, and elements within Elementor.
- Custom CSS is a premium feature that requires the PRO version of The Plus Addons for Elementor to be activated.
- Users can write global CSS rules or use the 'selector' prefix to target specific content within a section.

Do you want to customize the look and feel of your Elementor website beyond the options provided by the widgets? This is where custom CSS comes into play, which can help you customize and make specific design changes to your Elementor website.

With the Custom CSS extension from The Plus Addons for Elementor, you can easily add custom CSS to target specific sections, inner sections, containers, inner containers, and elements within those in Elementor.

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](http://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium feature, and you need the PRO version of [The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Custom CSS extension is activated, to verify this, visit The Plus Addons → Extensions → and Search for Custom CSS and activate.

## How to Activate the Custom CSS Extension?

Go to 

- **The Plus Addons **→** Extensions **

- **Search **the **Extension** name and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/01/tpae-custom-css-activate-1024x493.png)

> *Note: If you want to add custom CSS to columns of the old Elementor Sections you need to activate the Column Custom CSS extension.*

## Key Features

- **Target specific section** - You can easily target a specific section or content within it.

## How to Add Custom CSS in Elementor?

Select a section, inner section, container, or inner container and follow the steps -   

1. Go to **Advanced** > **Plus Extras:** **Custom CSS**.

2. Then in the **Custom CSS** section, you can write your custom CSS.

You can write global CSS rules that can affect the entire site or you can use the “*selector*” prefix to target the section itself or the content within the section only. 

![](https://theplusaddons.com/wp-content/uploads/2024/01/tpae-custom-css-selector.gif)

For example, if you only want to change the background color of H2 in the section you can write the CSS like this

`selector h2{
background-color:red;
}`

This will only change the background color of H2 in that section. 

Following this process, you can target and customize the style of any widget.

For more in-depth guidance on using [CSS in Elementor for free](https://theplusaddons.com/blog/add-custom-css-in-elementor/).<- Click here to learn more.

## Frequently Asked Questions

**Q: What should I do if the Custom CSS extension is not activating?**
A: If the Custom CSS extension isn't activating, first ensure that you have both the Elementor FREE Plugin and The Plus Addons for Elementor installed and activated. This feature requires the PRO version of The Plus Addons for Elementor. Navigate to The Plus Addons u2192 Extensions, search for Custom CSS, and toggle it on. If issues persist, check for plugin conflicts or updates.

**Q: What are the best practices for writing custom CSS in Elementor?**
A: When writing custom CSS in Elementor, it's best to use the selector prefix to ensure your styles apply only to specific sections or elements. This prevents unintended global changes. For example, using `selector h2 { background-color: red; }` confines the style to H2 elements in the targeted section. This approach helps maintain control over your design and avoids conflicts with other styles.

**Q: Does the Custom CSS feature work with older Elementor sections?**
A: To add custom CSS to columns of older Elementor sections, you need to activate the Column Custom CSS extension specifically. This extension allows you to target and customize styles for older sections, ensuring you can apply your desired CSS even if you're using legacy layouts.