How to add custom CSS to your WordPress Site

Are you struggling with How to add custom CSS to your WordPress Site? Sometimes you need to add Custom CSS to your WordPress site according to your requirements. For most beginners with a non-technical background, using FTP is confusing, but there are other ways to add it to your WordPress Site.

WordPress allows you to add custom CSS features to the site. This feature is available in any WordPress theme. CSS is a great way to customize your site according to your requirements. There are some free themes that will restrict you to do more customization, so you can do it by adding custom CSS for free. 

CSS makes your page looks more beautiful and attractive. It will save your time and effort. CSS is used to add styling to your page. If you are from a non-technical background, you will easily learn CSS and use it.

You can also add custom CSS to the theme’s “style.css” file if you have deep knowledge about WordPress, CSS, and PHP. In our tutorial, you will learn how to easily add custom CSS to your WordPress site without editing any theme files or any technical knowledge. So, Let’s get started.

We have some easy to follow methods for adding custom CSS:

  • Adding CSS using Theme Customizer
  • Using Elementor Pro
  • Using WordPress plugin

Method 1: Using Theme Customizer

So, You can now add custom CSS directly from the WordPress admin area. This is super-easy, fast and you would be able to see your changes with a live preview instantly. In this method, no need to add any plugin to add custom CSS.

First of All, Login to WordPress Dashboard.

Now click on Appearance >> Customize from the left sidebar.

Now A page will appear where you will see the WordPress theme customizer. Then click on the Additional CSS tab from the left pane.

 

When you click on Additional CSS then the tab will slide to show you a simple box where you can add your custom CSS. As soon as you will add It, you will be able to see it applied on your site’s live preview pane.

 

you can continue adding custom CSS code until you are satisfied with how it looks on your site, you can see it applied instantly.

And don’t forget to click on the “Save & Publish” button on the top when you are finished otherwise changes will not save and not be displayed on your site.

 

Method 2: Using Elementor Pro

Elementor Pro will give you the facility to add custom CSS to any element on your site. You can either add custom CSS to any element such as text, images, carousel, testimonial, navbar, icon, and many more. Elementor pro provides you the facility to add custom CSS on any page.

In this method, We will discuss how you can add custom CSS using Elementor Pro, Follow these steps:

  1. First of all, You have to log in to your WordPress Dashboard
  2. Now you have to open your Specific Page where you want to apply Custom CSS (Open With Elementor).

Note: You can add Custom CSS on your whole Page Or You can add Custom CSS on specific Blocks in your Elementor Page, So the choice is yours, We will Discuss both.

1: Adding Custom CSS on the Whole Page

Click On Setting Button at the Bottom Left.

Now Click on Advanced tab and then you can add Custom CSS.

 

 

2: Adding Custom CSS on Specific Block

Click on Specific Block where you want to add custom CSS.

 

 

Click on Advanced Tab and then You can add Custom CSS by clicking on the Custom CSS button like the picture below.

 

Add your desired CSS here…

 

Now, click on the “Update” button to save the changes you have made. You will see the effect on your page after adding custom CSS.  

Method 3: Using Plugins to add custom CSS

There are many free plugins available at the WordPress library which offers you the facility to add custom CSS to your site. 

Simple Custom CSS and JS

This plugin allows you to add custom CSS and JS to your WordPress site for free. The process of using this plugin is simple and easy. Just Download and Install the plugin and use it. Using this plugin, you will be able to do customization without any technical knowledge. This plugin is used with any theme. It won’t affect the theme CSS file. For example, if you added CSS to some plugin and you will change the theme, the CSS applied on the theme remains persistent. This plugin has more than 400,000 active installations.

Visual CSS Style Editor

Visual CSS Style Editor is another free plugin that is used to add custom CSS to your WordPress site. If you have no knowledge about CSS syntax and writing, then this plugin is the best. you can add CSS on any element using a visual CSS editor. You can customize the font, color, size, etc. 

Features:
It will customize page and element
Allows you to customize the login page
It has automatic CSS selectors
It will provide 60+ CSS properties
Visual Drag & Drop option
Margin & Padding editing visually
You can export stylesheet file

you can change and delete the CSS anytime, It will not affect the theme file. It is compatible with all the page builders. It requires no coding skills.

Simple Custom CSS Plugin

A simple custom CSS plugin is used to add CSS to your site. You just need to download and install the plugin. 

Features
The plugin will provide AMP Support
Customizer Control with live preview
Provide the code Syntax Highlighter
Error checking feature
It has a simple interface
Customer support

We hope this article helped you solve your problem.  You can also check our article on how to install the Astra theme in WordPress.

For Installing the Woccommerce plugin, follow our step-by-step instructions on how to install woocommerce on WordPress.

If you find any problem, tell us in the comment section below, we will answer you ASAP.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials.

One thought on “How to add custom CSS to your WordPress Site

Leave a Reply

Your email address will not be published.