There are 2 primary ways of managing and editing CSS in WordPress without plugins. They are:
Using the Theme Editor, which lives under the main “Appearance” Menu in the WordPress Dashboard.
Utilizing Additional CSS, which also is navigable from the “Appearance” menu; however, it lives 1 level deeper. The full path to get there is — Appearance > Customize > Additional CSS.
Editing CSS in WordPress With Theme Editor
Most WordPress websites have themes, and therefore, each theme will have its own associated styling, code, design, layout, etc. In many cases, the CSS code will be tied to a file called style.css.
When you enter the theme editor, WordPress will display a list of files related to your theme on the right panel. “style.css” or similar, should be one of them. Also, note that you could have more than 1 CSS file, but for the most part, the “main” one would be style.css.
To add or tweak existing CSS code, go to any of those files, and make the adjustments you want. Once satisfied, save your changes by hitting the “Update File” button.
Few Items To Consider and Know While Editing CSS Directly Within WP Theme Editor
Working with the Theme Editor means you’re making core code changes. In the wrong hands, or even accidentally making a mistake could mean that a site breaks. With that in mind, consider the following points — for when making amends to your CSS.
- Know what you’re doing. And even if so, ensure you always take backups of your site and all of the files you plan to tinker.
- If your theme updates, any CSS edits you made to any of the theme editor files would get erased.
- There isn’t a perfect way to see if your code alterations yielded the desired results without saving them first, and then testing them on the site. Ideally, you should be able to preview the changes first before saving them — kind of like using Inspect Element.
- The code improvements you make here will most likely, by default, be sitewide. Sure, you can go crazy with custom codes, but on a simplistic level, it would be sitewide. For example, if you change the color of your h1 to red, it will probably change it everywhere on your site, on all the URLs.
- If possible, work with a child theme.
Because of a few drawbacks mentioned here, leveraging the Additional CSS method might be more within your expectations if you only intend to add code instead of modifying existing — as the name suggests.
Editing CSS in WordPress With Additional CSS
One of the most significant benefits of working with Additional CSS is that you can view what your code does first, before saving it — a con we observed in the previous method. There is a preview panel on the right that allows you to see your changes live. See the example screenshot below.
A second advantage it has over the first one is that your code remains, even if you update your theme. Although, if you pick another theme for your site, your Additional CSS will get removed, which is still better than having it removed with every theme update like the Theme Editor method.
You May Also Want to Check Out:
- How to Fix the “Could Not Fully Remove the Plugin” Error
- How to Change Link Color in WordPress
- How to Add a Contact Form on Your WordPress Site
- How to Upload Google Search Console HTML File for a WordPress Site
- Basic Differences Between a CSS ID and a CSS Class
- Where Is the Head Tag in WordPress?
- How to Add Cloudflare to GoDaddy Managed WordPress
- How to Change the WordPress Excerpt Ellipsis to Read More (or Similar)
- How to Add Google Analytics to WordPress (Without a Plugin)
- All Other Topics and Posts
As we know by now, getting to the places from where you can make CSS edits in WordPress isn’t difficult. The complexity arises because of having the technical know-how of what changes are to be made, backups, and other nuances.
Depending on how large the site is, in size (number of URLs), and or revenue, it might even make sense to hire a professional as that comes with some accountability of work.