How to add custom CSS to your WordPress website?

If you are a perfectionist or have a stringent set of requirements, chances are high that the regular CSS won’t fit your purpose. Thankfully, WordPress allows you to customize the ways your website looks. And what’s even better? There are 2 ways by which you can do that. In this article, we will have a quick walkthrough each of these methods. Let’s get started.

This is one of the easiest ways through which you can customize your CSS. There is a range of plugins which allow you to do so.  Here we are discussing some of the mostly used plugins:

• Simple Custom CSS
  This is one of the most popular WordPress custom CSS plugins. The plugin lets you customize your CSS, implement new styles and override the existing CSS. What’s more? It values that your set here would stay intact even if you change the theme!
  All you need to do is click on Plugins > Add New in your dashboard. Find the required plugin and click on Install Now.
  Once installed, you should be able to see the plugin under Appearance > custom CSS section. The process is fairly easy going forward. You simply need to enter the values you want in the editor and save any changes that you made.
• Site Origin CSS
  It is another plugin which can help you in customizing your CSS without much ado. All you need to do is install the plugin. Once done, you can access it under Appearance > Custom CSS section on your dashboard.
• WP Add Custom CSS
  This is another reliable plugin you can choose to customize your CSS with. The tool allows you to modify the entire website or just a single post.
  You can install the plugin following the method we discussed above. Once installed, this plugin has its own section on your dashboard.

If you are using WordPress 4.7 or more, you can now customize your WordPress’ CSS directly from the backend.
The procedure is fairly simple to follow:

• Click on Themes > Customize on the dashboard.
• On the next page, you will be able to see the site’s preview with a few options on the left pane. Scroll down, and you will be able to see a tab called Additional CSS.
• Click on it, and you will be presented with a box wherein you can enter the custom CSS.
• Enter the required rules there and the same would be reflected in the preview pane.
• Finally, click on Save and Publish.

Troubleshooting Problems

Although the entire process of editing CSS is easy, at times, you might get stuck. Here are a few solutions to the common problems which would help you out:

• Changes are not reflecting
  A lot of times even after adding the custom CSS, the changes do not appear in the frontend. This might be because of cache. Clearing browser cache could be of help here. The best practice is to clear your site’s cache and browser cache and see if the changes reflect.
• Wrongly prioritized choices
  When it comes to customizing the WordPress CSS, we often tend to add two or more references to a single selector and end up causing a conflict. Since CSS is not aware of which value to apply, the results are not as expected.
  Thus, it is widely recommended to prioritize your values and work accordingly.
• Misspelled syntaxes
  This is a common sight. Using the wrong spelling of syntax would prevent the desired changes from reflecting themselves in the frontend. Thus, crosscheck your syntax and use an editor for detecting the errors.

Final Words
That said, adding custom CSS is a great way through which you can personalize your website and improve the user experience. This article would have taught you how to implement custom CSS to a WordPress website.

Do you have any queries? Shout out in the comments below!