WordPress offers some cool features to its users. Recently, one of our users asked us to modify the sidebar of their website, it was easy, but the problem occurred when the user didn't find an editor option to edit the stylesheet.
Well, you should know that to alter the design of your website, you require custom CSS to override the existing design code in the WordPress theme.
Most of the people get confused when they don't see the code editor, which might not be available because of some security reasons.
In this tutorial, you're going to learn different ways to add custom CSS to your WordPress website. Everyone knows that WordPress offers its built-in customizer, but people neglect it.
Some web developers might believe in editing the core stylesheet file. Well, if you want to add custom CSS, you need to add it somewhere else than the original CSS file.
I will also explain the procedure to edit the main style.css file using cPanel.
Use the Built-in Customizer
WordPress never stops surprising its readers. If you play a little bit with the WordPress admin panel, you can quickly discover an option to add an additional CSS.
If not, follow these steps.
Go to Appearance and click on the customize option.
You can see many options to update your website's settings, the best part is that you can see the home page of your site.
If you scroll down, you can see an option "Additional CSS." Click to open.
If you haven't added any custom CSS before, you can see a message to give you an idea about CSS and how you can use it.
Close it and see a box to add your CSS to modify any specific element of your website. You can see the live demo of the code you add.
After your final touch, click Publish showing at the top-left corner. Your design gets saved.
Use a WordPress Plugin to Add Custom CSS
No doubt that plugins are the saviors of millions of WordPress users, it's because non-techie people want something user-friendly, where they can copy and paste the code.
Follow the steps.
Go to Plugins>>Add New and search forSimple Custom CSS plugin, once you find it, click Install and activate it.
Make sure; you clear the website and browser cache after plugin's activation.
After activating, go to Appearance>>Custom CSS, and you can see a box to add custom CSS on this page.
Paste the code you have copied and click on the Update Custom CSS button.
Isn't that simple?
Congrats, you have learned two different ways to add Custom CSS from your WordPress admin panel. Now, you need to learn the cPanel method.
Use cPanel to Edit the Main CSS File
You may have already read an article on editing the stylesheet using cPanel. If not, keep an eye here.
To modify the design of a WordPress website, you need to edit the style.css file of its theme, and you should know where to locate it.
You need to open the file manager>>public_html>>wp-content>>themes>>theme name and search for style.css.
The location may vary depending on the WordPress theme you use. In most of the themes, you can find the style.css file in the main folder, but some web developers/designers prefer to have a different CSS folder.
Once you find the file, right-click to edit.
A new tab appears to you, where you can add your custom CSS.
NOTE: I hope you know what you're doing.
It's essential to backup your whole website and its database before making any changes.
Which Method is the Easiest One
Everyone has a different choice to accomplish the same task. Majority of people might choose to use the built-in WordPress customizer, but some might think about using a plugin.
Well, if you can accomplish something without a plugin, you should avoid using any.
It's possible that you don't have access to your WordPress admin panel, in such a situation, you require to access the stylesheet file using cPanel.
You should know that a small CSS alteration can rupture the layout of your whole website, it's vital to understand before you do something.
I remember breaking my website by copying and pasting a CSS code. You should understand the CSS code, you're going to use. Always have the backup.