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.
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.
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 dont 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: WordPress hacks WordPress Plugin WordPress tips WordPress tricks WP
0 comments