Skip to content

How to add custom CSS in your WordPress website

add custom CSS in your WordPress website

Introduction

Do you want to modify the appearance of your website by adding custom css in WordPress website?

You have the ability to change how your website looks, even beyond the regular options, by using something called custom CSS. Many beginners might find FTP (File Transfer Protocol) a bit difficult to use, but there are simpler ways to add custom CSS.

We’ll show you how to add custom CSS to your WordPress site without editing any theme files in this article.

Why add custom CSS in WordPress?

CSS, which stands for “Cascading Style Sheets,” is a programming language for styling WordPress websites. Because CSS styles various HTML elements like color, size, layout, and display, HTML and CSS go hand in hand.

By adding custom CSS in your WordPress website lets you change how your website looks and looks, which isn’t possible with the default options. It gives you more control, and you can undoubtedly make changes to your WordPress subject with a couple of lines of code.

Let’s say, for instance, that instead of using the same color throughout the website, you want to change the background color of each individual post. You can customize the background of a specific post or page by adding custom css code.

Essentially, you can change the style and presence of item classes on your Internet business store utilizing extra CSS.

Different methods to add custom CSS in WordPress website

Having said that, let’s examine the various methods to add custom CSS in WordPress website. You can skip to any section you want by clicking the link below:

  • Method 1: Adding Custom CSS Utilizing Topic Customizer
  • Method 2: Using the WPCode Plugin to Add Custom CSS
  • Method 3: Using a custom CSS plugin versus adding CSS to the theme when using Full Site Editor (FSE)

Method 1: add custom CSS using theme customizer

Custom CSS can now be added directly from the WordPress admin area since WordPress 4.7. This is incredibly simple, and you will immediately have access to a live preview of your changes.

From your WordPress dashboard, you must first visit the Appearance » Customize page.

add custom CSS in your WordPress

The WordPress theme customizer interface will be launched by this.

On the left pane, you will see a number of options and the live preview of your website. Click on the ‘Extra CSS’ tab from the left board.

add custom CSS in your WordPress

The tab will slide to reveal a straightforward box in which you can enter your own custom CSS. You will be able to see the effect of a valid CSS rule applied in the live preview pane of your website as soon as you add it.

add custom CSS in your WordPress

You can keep adding custom CSS code to your website until you are happy with how it looks.

Remember to tap on the ‘Distribute’ button on the top when you are done.

Note: Theme customizer only supports that particular theme when you add custom CSS. You will need to copy and paste it to your new theme in the same way if you want to use it with other themes.

We at it doctorz, also created a video version of this article for you

Method 2: adding custom CSS using the Wpcode plugin

You can only save custom CSS for the theme that is currently being used with the first method. In the event that you change the subject, you might have to reorder your custom CSS to the new subject.

This approach is suitable for you if you want your custom CSS to be applied regardless of the WordPress theme you are using.

With over one million users, WPCode is the best custom code snippets plugin available. It makes it simple to add custom code in WordPress and accompanies highlights like an underlying code scraps library, restrictive rationale, transformation pixels, and that’s only the tip of the iceberg.

Installing and activating the free WPCode plugin is the first step. Please refer to our tutorial on how to install a WordPress plugin if you require assistance.

From the WordPress admin dashboard, simply go to Code Snippets » + Add New after activation.

After that, select the “Use snippet” button by hovering over the “Add Your Custom Code (New Snippet)” option in the code snippets library.

add custom CSS in your WordPress

Next, give your custom CSS snippet a title at the top of the page. This can be anything that assists you with distinguishing the code.

After that, enter your own custom CSS into the “Code Preview” box and select “CSS Snippet” as the “Code Type” from the dropdown menu.

add custom CSS in your WordPress

Then, at that point, look down to the ‘Addition’ segment and select the ‘Auto-Supplement’ technique to execute the code across your whole WordPress site.

You can select the “Shortcode” method if you only want the code to be applied to a select number of posts or pages.

add custom CSS in your WordPress

Now, click the “Save Snippet” button and return to the top of the page to toggle the switch to “Active.”

add custom CSS in your WordPress

You can now see the custom CSS in action on your WordPress website.

Method 3: adding additional CSS with full site editor

Another way you can add your own special CSS in WordPress is by using something called the Full Site Editor (FSE). Think of it like editing a blog post or page, but you get to change the way your whole website looks using this tool in WordPress.

But here’s a heads up: not all themes work with the full site editor. You can learn more about this by checking our article on the best WordPress themes that let you do this.

Now, adding CSS becomes easier if you use a plugin. However, if you don’t want to use a plugin, we’ll explain how to use a tool called the customizer, even if you can’t find it in the main menu of your website’s admin area.

Simply logging into your WordPress admin is all that is required.

Then, just reorder the URL underneath into your program, and replace ‘example.com’ with your own site’s area name.

1.https://example.com/wp-administrator/customize.php

This will carry you to a restricted variant of the subject customizer. In the menu on the left, you ought to see the choice for adding custom CSS at the base.

Simply select the tab labeled “Additional CSS.”

add custom CSS in your WordPress

Enter your CSS code now into the Additional CSS field.

Simply press the “Publish” button following the addition of the code.

add custom CSS in your WordPress

Conclusion

adding custom CSS to your WordPress website offers you the ability to personalize and fine-tune its appearance beyond the standard options. Whether you opt for user-friendly methods like plugins or explore more advanced tools like the Full Site Editor, customizing your website’s design becomes accessible and flexible. By using these techniques, you can give your website a unique and tailored look that suits your brand or style preferences, enhancing the overall visual experience for your visitors.

Scan the code