How To Add Custom CSS In WordPress 2024 🔥 - (FAST & Easy!)

How To Add Custom CSS In WordPress 2024 - (FAST & Easy!)
Learn how to add Custom CSS Class In WordPress step by step. Adding custom CSS to WordPress is a quick and easy process.

I cover three ways to add custom CSS in WordPress. The first way is using the Customizer and Additional CSS. The second way is via a WordPress plugin known as Simple Custom CSS. This method is a good way if the Customizer tab isn't found in your current WordPress theme. The third way is adding Custom CSS via blocks with the Gutenberg editor using a WordPress plugin called Blocks CSS.

Let's get started. To start, I'm in the WordPress dashboard, in the left-side menu hover over the Appearance tab. Click Customize. You can also get to the Customize page when viewing your website. In the top WordPress toolbar, click Customize.

From the Customize page, find Additional CSS and click it. You’ll see you can now input your CSS here. I’ll input some custom CSS to change the font size of paragraphs to a different size. You’ll see over on the right you can view the changes. If you want to add multiple CSS just skip a space and enter another Custom CSS like shown here. Click the publish button to save your changes.

Now let’s go over the second way on how to add custom CSS in WordPress. This method is good if you don’t have an option for Customize like shown in the first step

From the WordPress dashboard. Hover over the Plugins tab in the left-side menu. Click add new plugin. In the search field type in simple custom css. Click the install now button to install the plugin. Once it is done installing activate the plugin by clicking activate.

Next, in the left-side menu hover over the Appearance tab. You’ll see Custom CSS. Click this.

You can now input your Custom CSS here. Click the update CSS button to save your changes. Now let’s cover the third way to add Custom CSS in WordPress. If you are wanting to add Custom CSS to a specific block on a specific page or post in WordPress using Gutenberg blocks. Here’s how to do this.

From the WordPress dashboard, hover over Plugins in the left-side menu. Click add new plugin. In the search field type in and search block css. You’ll see the plugin here called Blocks CSS. Click the install now button to install the plugin. Once it is done installing click the activate button.

Next, hover over Pages or Posts in the left-side menu. The steps are the same whether you want to add Custom CSS for a WordPress Post or Page. I’ll click Pages. Next, click edit on the page you want to add the custom CSS for.

From here, find the block containing what you want to add Custom CSS for. For example, I’ll click on this Block here. You’ll see over to the right the field that says Custom CSS. Click this. You can now add your Custom CSS to this specific block.

This is a great way to add block specific styles to each Gutenberg block. It also helps with proper targeting as you can use the selector keyword instead of using the browser inspector tool.

I’ll add some CSS to change the background color for this block. You’ll see it changed to white. If I want to change the padding, I’ll copy in CSS for the padding. I can change them and you’ll see they will change. Click the update button to save your changes.

That is how to add Custom CSS in WordPress three different ways.

Disclosure: We receive a commission from the companies below if you purchase through our links. Purchasing through our links adds no extra cost to you and can only save you money.

Web Hosting:

Bluehost:

Hostgator:

Hostinger:

SiteGround:

DreamHost:

A2 Hosting:

WordPress Page Builders:

Elementor: (Favorite!)

Divi:

Help With WordPress:
Fiverr:

Premium WordPress Themes:
Themeforest:

Here's the complete WordPress tutorials playlist:

Music Used In Video:
Creative Commons — Attribution 3.0 Unported — CC BY 3.0

Check out our website for more web hosting tutorials:

[wpcupidblog]

Enjoy the tutorial! Let me know if you have any questions or have a tutorial you want me to cover!

[JeffChabot]

FYI this is for older versions of WP and themes. Don’t use plugins if you don’t have to because the newer versions (twentytwentythree and twentytwentyfour) are more versatile.

[viktor]

I don't have the customized menu like you. Only temlate and editor. Why is that??