The Complete Guide to Using Custom CSS in WordPress Blog 2021

You can make your WordPress blog or website look the way you want by using custom CSS. In this article, we will know that if you have knowledge of CSS, then how can you implement it on your WordPress blog.

If you do not know about CSS, then you can read our previously published post, in which we have given information about CSS in the second section.

You use custom CSS in WordPress only if you have a good knowledge of CSS. Therefore, before starting, I would recommend that you learn about CSS. If you want to learn CSS, W3Schools is the best.

You can also watch the following video series to learn CSS:

By default, whatever theme design you see on the WordPress website, they are due to pre-defined CSS which is set by the developer of your theme in the theme files itself.

But you can override those CSS rules using custom CSS or add some new CSS properties of your own.

So let’s know that you…

How to Add Custom CSS in WordPress?

To add custom CSS in WordPress, follow the steps given below:

In the left pane of your WordPress Dashboard, go to Appearance > Customize, as shown in the screenshot below.

Using Custom CSS in WordPress Blog
Using Custom CSS in WordPress Blog

Now the customize window of WordPress will open in front of you, in which you can manage different options related to designing your WordPress blog and most WordPress users will be familiar with this window.

Using Custom CSS in WordPress Blog

In this, you will see an option of Additional CSS, as highlighted in the above screenshot. You have to click on this.

If you open it for the first time, then some such window will open in front of you, in which some basic instructions will also be given.

Using Custom CSS in WordPress Blog

I would recommend that you understand these basic instructions carefully and start again. When you understand this screen, then close the instructions and you can apply any CSS property of your own in the window below. The window in which you have to write CSS properties with selectors is highlighted below.

Using Custom CSS in WordPress Blog

So as soon as you add any CSS property completely, they will be applied to your site as well, and the result will be displayed on your website page open in the right because it is a life customize window.

Let me show you by adding a CSS property as an example. If you know CSS, then you will know that to apply a style to CSS properties, you have to use selectors. There are IDs, Classes, Tags, etc. in the context of Selectors HTML elements.

Now suppose that you want the logo of your site to disappear. So let me show you this using custom CSS. First of all, I should know the selector of the logo of my website. The selectors may be different according to different themes. So the first thing to do would be to find the selector.

How to find CSS selectors in WordPress?

Right-click on any element whose selector is to be found, and then click on the option of inspect element, as shown in the screenshot.

Using Custom CSS in WordPress Blog

After that, a somewhat complicated-looking window will open in front of you, as shown in the screenshot given below. In this, you have to find the right selector. This work is a little attention-grabbing, but if you have knowledge of CSS then you will get the selector in a few seconds. As of now I have got the logo of my theme as selector class which is shoutmeloud_logo_class.

Using Custom CSS in WordPress Blog

So in this way you can find the CSS selector of any HTML element of any page of your WordPress blog.

You can open the customizer window for any page of the WordPress website. As shown in the screenshot below that I have opened a WordPress post, so if I log in to the WordPress dashboard, you will be able to see this option of customizing in the top bar.

So let’s make the logo disappear by using the selector I have found for the logo.

For this I have to type this code in the window with custom CSS:

.shoutmeloud_logo_class {

display: none;

}

So the part that you can see in the above screenshot, as soon as I wrote this code, the logo disappeared. If you want to save the changes by adding such CSS, then all you have to do is click on the publish button above. So your changes will be saved and will be applicable to all visitors.

So in this way you can make any changes in the design of your WordPress website or blog, using any CSS property.

Tell me if you have any questions related to this post?

To show your happiness and curiosity towards our post, please share this post on social networks like Facebook, Google+ and Twitter, etc.

Be sure to read our other articles also:

Comment below to ask any kind of question-related to this blog post.

Leave a Comment