CSS is used to handle specific parts of a webpage. By using CSS we can control the text and font, also we can handle the spacing between paragraphs, and many more things that are simple to understand but provide strong control over all HTML documents. CSS is combined with HTML.
What is CCS?
CSS stands for cascading style sheets. It describes how to show the user HTML elements in proper format on the screen. CSS is a language that can be used to style HTML documents. In simple words, cascading style sheet is a language that simplifies creating a webpage.
Why do we add custom CSS?
Adding CSS helps you to customize the design and appearance of your website, which is not possible with the default options. It gives you more control, and you can easily customize your WordPress theme with a few lines of code.
For example, if you want to change the background of each post, instead of using the same color throughout the website. With the help of custom code CSS, we can change the color and background of a specific page and post.
Similarly, you can change the theme and appearance of e-commerce products with the help of additional CSS.
Benefits of Custom CSS
Here are some benefits of custom CSS:
1. Customization:
Custom CSS allows customers to create the shape or size of any website as per their requirements. By using Elementor anyone can add custom CSS in their widgets with less knowledge of coding.
2. Consistency:
You can use the same CSS style in your website’s theme and widgets and create an independent style or shape.
3. Performance:
Using custom CSS to style your widgets and widgets can reduce the amount of code you need to load, which can improve the speed and performance of your website.
4. Adaptability:
By using Elementor, you can add custom CSS to your page and widgets. It allows us to create designs and layouts of different types.
Methods to add custom CSS using Elementor
In this section, we explore the ways to add Elementor custom CSS. We’ll cover methods by which you can apply CSS throughout your website, including on specific pages and using Elementor widgets.
1. Use Elementor HTML widget
Elementor enables you to add custom CSS to any widget. But in some cases, you have to add your HTML and CSS manually. In those cases, you need to use HTML widgets.
HTML widgets can evaluate HTML, CSS, and javascript. You can add any code you want in the HTML code field and if it is valid, the element shows it as a widget.
HTML widget supports both inline and standalone CSS. Any code that you add using element widgets only affects that single element.
2. Use the Elementor site setting
Elementor includes global settings options similar to the options found in your WordPress customizer. To access the Elementor site settings, open the editor and click on the menu in the upper left corner of the screen:
On the next page, select Site menu settings:
Inside you’ll see a collection of settings that enable you to customize the style of your website. Whatever changes you make from this menu are applied to your entire website, even if you’re technically only editing a single page.
Open the Custom CSS tab and you’ll see a field that looks just like the custom CSS options for sections, widgets, and columns:
Any custom CSS you add here affects your entire website. Although we only intend to customize specific elements, we recommend that you use a more targeted approach (such as adding CSS directly to a widget).
3. Use customizer
WordPress customizer also enables you to add custom CSS on a site-oriented basis.
To do this, go to dashboard>appearance>customize and select the option of additional CSS from the left side menu.
However, it’s worth nothing except the Elementor code fields are more user-friendly than the ones available in the Customizer. If you have already used Elementor to create a website, there is no reason left to add CSS to the customizer.
4. Load custom CSS files
If you are comfortable editing WordPress files and accessing the website via a File transfer protocol (FTP) client, you can enqueue a CSS stylesheet to load with Elementor. In this approach add your code to the WordPress function.php file.
To access the Access.php file, connect your website to FTP and go to the WordPress root folder. Open the folder, find the function.php file, and edit it. Here is an example of code that needs to be added to your file.
That code is used to load the before_enqueue_scriptshook stylesheet which is called custom_stylesheet. We can also use get_stylesheet_urifunction to point toward the stylesheet location in the server.
Ideally, you will add your custom stylesheet to your child theme directory or theme folder itself. A stylesheet can contain any Elementor CSS code you want. The code that you add in the snippet ap function.php ensures that it will load only when Elementor is active on your website.
5. Use CSS plugin
There are many CSS plugins available that enable you to add custom CSS to your website without using a customizer or page builder. For this purpose, we have a favorite tool called simple custom CSS and JS:
With simple custom CSS and JS, you can directly add code to your theme’s headers and footer elements. Start from custom CSS & JS>add custom CSS and then click on add new option. You will see a basic CSS editor. Configure whether the CSS loads in the internal stylesheet or the external.
Once you are done editing the CSS code, press the publish option, you will need to switch to the frontend view to see if the code is working or not.