Beginner - WordPress

How to Easily Add Custom CSS and Find CSS Selectors to Your WordPress Site

Sometimes you may find yourself needing to add Custom CSS in your WordPress site. Perhaps it’s because you’re following a tutorial on WPBeginner. If using FTP is too confusing, then there is an easier way to add CSS on your site. In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files.

Since WordPress 4.7, users can now add custom CSS directly from WordPress admin area. This is super-easy and you would be able to see your changes with a live preview instantly.

Add Custom CSS

Head over to Themes » Customize page.

This will launch the WordPress theme customizer interface.

You will see your site’s live preview with a bunch of options on the left pane. Click on the Additional CSS tab from the left pane.

The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied to your website’s live preview pane.

You can continue adding custom CSS code until you are satisfied with how it looks on your site.

Don’t forget to click on the ‘Save & Publish’ button on the top when you are finished.

 

Find CSS Selectors

I’m a developer and I’m also a supporter. I often hear customers ask:

“I want to hide it”, “I want to change color to red, plz…”, “My footer is too long!”, bla bla …

Today, I will make it easy for newbies to edit their site in CSS. Let’s go!

All the major browsers come with a developer tool (dev tool) that will let you view the code for the page.  In this post, I’ll run through an example using Chrome.

For example, in Twenty Sixteen theme, I will change Comment Title in a single post. You can see it:

2 thoughts on “Hello world!”

Here are some steps to run through:

1. Right-click to 2 thoughts on “Hello world!” and select Inspect  or Ctrl + Shift + I

2. Now, a dev tool is displayed.

3. You need to copy this selector form Styles tab (right panel) to Additional CSS tab.

.comments-title {
margin-bottom: 1.217391304em;
}

4. Now, you just need to change attributes. For example, I change it to red.

Or I want to hide it.

Good luck!

 

 

N'DoubleH

Sometimes I just want to give it all up and become a handsome billionaire.