Customizing your theme styles usually required the use of a plugin to edit the style.css file because if you were to modify this file directly, you would lose your changes whenever there was a theme update.
So the use of a plugin, such as “Simple Custom CSS” which is very popular, was the solution. Actually, we still believe it’s still the way to go when making edits to your theme’s stylesheet(s) because it gives you a lot more room to work with (more on this shortly).
Introducing Additional CSS
WordPress now includes an extra panel in the Customizer called “Additional CSS“. The purpose of this new feature is to let you edit your theme’s CSS without the use of a plugin.
However, it does not give you a lot of room to work in, especially if you plan to do a lot of customization.
If you are making quick simple CSS changes, then this feature comes in handy, but once you start to add a lot more style code, then it gets quite messy and squished to the point it’s hard to read and manage. If you get to this point, then we recommend opting in for the Simple Custom CSS plugin.
Remove the CSS Comment from the Window
As you can see in the screenshot (see further above), you will find this comment:
/*
You can add your own CSS here.
Click the help icon above to learn more.
*/
This is a bit confusing for many people because they end up adding their CSS code between the “Your can add your own CSS here” and “Click the help icon above to learn more.” lines and will discover their modification is not working. This is because the comment you see is done in a CSS comment form. Anything between the /* and the */ is a CSS comment, so any code you put in there is going to be seen as only a code comment and not functional code.
We recommend you delete everything there first, then add your CSS code.
IMPORTANT: Whatever code you add to this field, make sure you click “Save & Publish‘ at the very top of your customizer.