Solution:1
Any code added to a child theme will not mess with the code of the original “Parent” theme. You can add your own stylesheet in it and override any styles you please, and they will carry over after any updates.
Solution:2
Many website owners find that directly modifying the CSS file is the easiest route to take. And in all honesty, it is the simplest method because it can be done directly from WordPress without any additional plugins.
To do this, click on Appearance and select the Theme Editor option.
This will display all of the files associated with the theme you are currently using. As a result, you just need to make sure that you’re editing the correct CSS file. And the file you choose to edit depends on the specific element you want to customize.
Although many people find this part of the customization easier, it does come with its drawbacks.
For instance, you may have to re-code the CSS if you decide to change themes. Most themes will use their own CSS file for the overall design. Thus, the changes you make to one theme’s file will have no impact on another.
However, it is worth noting that you will not be changing themes very often.
A good workaround to this is to save all of the custom CSS you add to a theme’s file into a notepad. That way you can use the same code on a different theme if you so choose to.
However, many site owners choose to use child themes. This way, any changes to CSS you make will not be deleted should the developer update the main theme. You get all of the benefits without losing custom coding.
As any WordPress developer knows, plugins allow you to customize any part of your website without writing a single line of code in most cases. So it should come as no surprise to learn that there are a variety of plugins that make adding custom CSS a breeze.
And this has one major advantage over the last method.
Instead of the CSS being saved directly in a theme file, it is saved within the plugin file. This means that you can freely use the same CSS across multiple themes without rewriting it. It’s a huge time saver for those developers who change themes often.
Another huge advantage is that many plugins have safeguards that prevent code from crashing your website. After all, it doesn’t take much to bring a website down when modifying a theme file and this method avoids it entirely.
Thus, it is probably the best method to consider when just starting out.
Here are a few great plugins to consider using:
The Visual CSS Style Editor plugin is an incredible choice to add custom CSS to WordPress. It’s built with a visual editor and gives you control of more than 60 styling properties on the website.
Its responsive tool lets you edit any page, post, login page, and element. Although the pro version gives you a slew of other features, such as 800+ Google fonts, the free version is very powerful for editing CSS.
Simple Custom CSS is the most popular plugin to add custom CSS to your website. The plugin allows you to add custom CSS that overrides any plugin or theme files. As a result, you can customize your entire website with just one plugin.
It also includes some error checking, which is great for beginners.
Regardless if you need to add changes to the CSS for the whole site or just a handful of pages, WP Add Custom CSS can accommodate them. The changes you make in this plugin will override the main style sheet to give you the appearance you want on your site. It’s available in English, German and Spanish.
Most themes have built-in sections that will allow you to add coding from the “Customize” area in WordPress. This allows you to directly add CSS into the theme’s files and many of them allow you to see the changes in real-time.
These are child CSS files (not to be confused with child themes in WordPress) and they work in conjunction with your primary style sheet.
Similar to the first, the major drawback of using this method to modify the CSS is the potential to lose your adjustments if you switch themes. These are specific for the design and will not remain once you switch your theme.
However, it can be a great way to make specific changes based on the theme itself. For example, specific colors or fonts used in this child CSS may not be visually appealing in the new theme anyway.
After you click on “Customize,” the WordPress customizer will pop up. Scroll down some and click on the “Additional CSS” option.
This will open up a CSS editor. Here you can add all of your own custom CSS code.
Here is a good example of how adding custom CSS here will reflect on the site right away so you can see the changes and how they look before publishing.
In this code, we are changing the shadow color of heading 1 on the site.
Before Code Added
After Code Added
The code we used to accomplish that look was simply added right into the customizer
You can add all the custom CSS code you want directly in this customizer area. It makes it easier to see all the changes in real-time.
Using CSS to modify your site can enhance its performance, give you greater control and help you fine-tune your design. As long as you have a basic understanding of how the coding works, or at the very least see what the changes do in real-time, it can be relatively simple to add CSS to WordPress.