How to Easily Add Custom CSS to Your WordPress Site?


Are you looking for a way to easily add custom CSS to your WordPress site?

WordPress is the platform that allows you to create a functional website with no technical knowledge at all. Moreover, the addition of CSS is the easiest and quickest method to make changes in the site in a meaningful manner. 

It might be confusing at the beginning but don’t worry we are there to help you out. Here, we have mentioned little information about CSS and detailed step-by-step instructions to add them to your WordPress site.

What is CSS?

CSS (Cascading Style Sheets) helps to customize appearance, layout, fonts, colors, and many more. it allows you to control the overall look of the site than your theme does. Additionally, it creates a comfortable environment to work in. 

Moreover, the script that is embedded into the CSS can govern everything possible. For instance, you can change the colors or fonts of your headlines with only a few lines of code. So, if you are willing to develop a website of your desired design then adding CSS is a must.

Ways to Add Custom CSS to Your WordPress Site

Here, we have mentioned the two easiest ways to add custom CSS to your WordPress site.

Step 1: Using a Plugin

This method is applicable for the one who wishes to apply custom CSS that works without depending upon the theme you are using. This method is shortest as well as easiest too. 

Simple Custom CSS is a free plugin that is used to add custom CSS. This is generally designed to fulfill the need of the developer who wants to add their own CSS to the WordPress site. Here are the steps:

  • Install and activate Simple Custom CSS.
  • Navigate to Appearance >> Custom CSS.
  • Add your custom Code. Click on the “Update Custom CSS” button to save your changes.
  • Visit your WordPress site to see the changes you made.  

Step 2: Using Theme Customizer

This is an easy method and you will see the changes instantly on a live preview. Here, are the steps :

  • Navigate to Theme>> Customize.
  • You will see the WordPress theme customizer interface. After that, a screen with your site’s live preview appears along with a bunch of options on the left pane. Click on “Additional CSS” tab.
  • A small box will appear where you can your CSS.  After the addition of the valid rule, you will notice that it is already applied on your live website’s preview pane.
  • Continue adding CSS code until you have desirable look on the site.
  • Make sure, you click on the publish button when you are finished.

Note: The CSS that you add using theme customizer works with only that theme. You need to copy and paste them whenever you switch to a new theme. 

Wrapping up

We hope this article was helpful for you. If you have any queries regarding this topic please feel free to ask in the comment section. You can check out our other article “How to Add the First and Last CSS Class to WordPress Menu Item?” for detailed information about CSS. 


Please enter your comment!
Please enter your name here