Some­times you may find your­self need­ing to add Cus­tom CSS in your Word­Press site. 

Per­haps it’s because you’re fol­low­ing a tuto­r­i­al on WPBe­gin­ner or our YouTube chan­nel. For most begin­ners, using FTP is too con­fus­ing, but there are oth­er ways to add cus­tom CSS.

In this arti­cle, we will show you how to eas­i­ly add cus­tom CSS to your Word­Press site with­out edit­ing any theme files. 

Video Tutorial

If you pre­fer writ­ten tuto­ri­als or want to move at your own pace, then con­tin­ue read­ing the instruc­tions below.

Method 1: Adding Custom CSS Using Theme Customizer

Since Word­Press 4.7, users can now add cus­tom CSS direct­ly from the Word­Press admin area. This is super-easy, and you would be able to see your changes with a live pre­view instantly. 

First, you need to head over to the Themes » Cus­tomize page. 

This will launch the Word­Press theme cus­tomiz­er interface. 

You will see your site’s live pre­view with a bunch of options on the left pane. Click on the Addi­tion­al CSS tab from the left pane. 

The tab will slide to show you a sim­ple box where you can add your cus­tom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live pre­view pane. 

You can con­tin­ue adding cus­tom CSS code, until you are sat­is­fied with how it looks on your site. 

Don’t for­get to click on the ‘Save & Pub­lish’ but­ton on the top when you are finished. 

Note: Any cus­tom CSS that you add using theme cus­tomiz­er is only avail­able with that par­tic­u­lar theme. If you would like to use it with oth­er themes, then you will need to copy and paste it to your new theme using the same method. 

Method 2: Adding Custom CSS Using a Plugin

The first method only allows you to save cus­tom CSS for the cur­rent­ly active theme. If you change the theme, then you may need to copy and paste your cus­tom CSS to the new theme. 

If you want your cus­tom CSS to be applied regard­less of which Word­Press theme you are using, then this method is for you. 

First thing you need to do is install and acti­vate the Sim­ple Cus­tom CSS plu­g­in. Upon acti­va­tion sim­ply go to Appear­ance » Cus­tom CSS and write down or paste your cus­tom CSS. 

Don’t for­get to press the ‘Update Cus­tom CSS’ but­ton to save your changes. 

You can now view your Word­Press web­site to see the cus­tom CSS in action. 

Using a Custom CSS plugin vs Adding CSS in Theme

Both meth­ods described above are rec­om­mend­ed for begin­ners. Advanced users can also add cus­tom CSS direct­ly to their themes. 

How­ev­er, adding cus­tom CSS snip­pets into your par­ent theme is not rec­om­mend­ed. Your CSS changes will be lost if you acci­den­tal­ly update the theme with­out sav­ing your cus­tom changes. 

The best approach is to use a child theme instead. How­ev­er, many begin­ners don’t want to cre­ate a child theme. Apart from adding cus­tom CSS, often begin­ners real­ly don’t know how they will be using that child theme. 

Using a cus­tom CSS plu­g­in allows you to store your cus­tom CSS inde­pen­dent­ly from your theme. This way you can eas­i­ly switch themes and your cus­tom CSS will still be there. 

Anoth­er great way to add cus­tom CSS to your Word­Press site is by using the CSS Hero plu­g­in. This won­der­ful plu­g­in allows you to edit almost every CSS style on your Word­Press site with­out writ­ing a sin­gle line of code. 

We hope this arti­cle helped add cus­tom CSS to your Word­Press site. You may also want to see how our guide on how to cre­ate a cus­tom Word­Press theme with­out writ­ing any code, and the best Word­Press drag & drop page builder plu­g­ins.

If you liked this arti­cle, then please sub­scribe to our YouTube Chan­nel for Word­Press video tuto­ri­als. You can also find us on Twit­ter and Face­book.

The post How to Eas­i­ly Add Cus­tom CSS to Your Word­Press Site appeared first on WPBe­gin­ner.