top-arrow

How to Add Custom CSS to Your WordPress Site Easily

Sometimes we may want to add custom CSS to fix website styling or add our own custom design to the existing theme in WordPress.

Adding custom CSS helps us to change our website layout and appearance. But it’s not possible to edit the wordpress stylesheet file from the dashboard. You will need FTP, but it’s too much confusing for beginners and complicated as well.

Don’t worry. There are alternative ways to add custom CSS.

In this post, we will guide you on how to add Custom CSS to the WordPress website without editing theme stylesheet files.

Why Add Custom CSS in WordPress?

CSS is Cascading Style Sheet used for styling any HTML element like color, size, layout, and display.

In wordpress, adding custom CSS helps to customize the design and appearance of wordpress themes with just a few lines of code, but it isn’t possible to write CSS to the stylesheet by default.

As an example, if you want to change the background color of each individual post instead of the theme color, you can do this easily by adding custom CSS.

Similarly, you will be able to change the look of the products grid on the wooCommerce store using custom CSS.

Method of Adding Custom CSS.

There are a few ways to add custom CSS to your WordPress website.

Method-1: Adding Custom CSS with theme customizer
Method-2: Adding Custom CSS with a plugin

Method-1: Add Custom CSS with theme customizer

You can add Custom CSS directly within the WordPress admin area. This is the easiest way and a live preview of the changes can be seen instantly.

At first, you will have to navigate to the Appearance » Customize page from WordPress Dashboard.

Add Custom CSS in WordPress

This will open up the WordPress theme customizer editor with a live preview and a left-side panel.

Click on the ‘Additional CSS’ tab from the left panel.

Additional CSS in WordPress

It will open up a CSS code area box where you can apply the Custom CSS rule.

After putting the necessary custom CSS on this area, you will be able to see the change to the side previews. Click on Publish button when you are satisfied with the result.

NOTE: This Custom CSS is only applicable for the current theme installed in wordpress. So, switching the theme will make the code disappear. So make sure to copy the CSS code and paste it to the new theme using the same method.

Method-2: Add Custom CSS with a plugin

Above the first method will only allow you to add additional CSS for the current theme. If you plan to use another theme later, then you will need to copy and paste the CSS to the new theme.

That’s a problem actually. So, to avoid this issue, Adding custom CSS with a plugin will be much helpful.

You will need to install and activate the Simple Custom CSS plugin

After activating this plugin, Go to Appearance » Custom CSS and write down the necessary Custom CSS here.

Click on the ‘Update Custom CSS’ button to save your changes.

You can check to changes you have made through CSS by visiting your website. The live preview option is not available in this method.

Custom CSS plugin vs Adding CSS in Theme

The above methods are recomended for the beginers.

Advance user can add custom CSS directly into the theme customizer. But if you accidently update your theme, all the changes you have made with Cusotm CSS will be lost unless you have a backup of CSS rules.

So, adding custom css to the parent theme is not recomended. Using a Child Theme is best approch to add custom css. It won’t make any affect when you update the parent theme.

However, many beginners don’t have idea about child theme as they are not used to on it.

On the other hand, Using a plugin to add custom css is safer comparatively. The plugin stores the custom css rules independently from the theme. So you can easily update or switch your wordpress theme anytime without losing CSS.

Conclusion

Hope this article helped you much to add custom CSS to your wordpress website.

Check out our other blogs on various WordPress Tips and Tricks we have published.

Tags:

0 comments

Leave a Reply

Sajjad Hossain
about me

Sajjad Hossain Sajib

Hey. Welcome to my profile. I am a professional web designer and developer. Mainly I am specialized in Wordpress and e-Commerce. I love to learn things and share. So stay connected with WebExtent to get the latest tips and tricks, and tutorials.