CSS (Cascading Style Sheets) is the style sheets language that defines the visual appearance of web pages. We say primary because HTML (HyperText Markup Language) is also capable, albeit not to that extent. Plus, the practice was actively discouraged since late 1997, following the release of HTML 4. Although the ability to install WordPress themes largely reduced the extent of use of this style sheets language, you will be forced to make tweaks to your website’s appearance eventually. That’s precisely when the knowledge of how to edit CSS in WordPress comes into play. Let’s start.
1. Customize CSS through WordPress Admin Section
We’re starting with the most straightforward way to make changes to CSS. It only requires a WordPress interface with no plugins, code editor software, or tweaks. However, it’s not the safest way to do so, especially if you aren’t using a child theme. If that’s the case, you’ll also lose all changes the next time you update your WordPress theme. To reiterate, you should only use this method if you plan to edit the CSS of a child theme extensively or globally, and you’re 100% sure you know what you’re doing.
Steps to alter CSS via WordPress Admin
You should have a backup of your website beforehand in case things turn sour. If you need a quick solution before you proceed, check our list of top backup plugins for WordPress. With that said, editing CSS from the WordPress Admin dashboard words like this:
- Access the WordPress Admin section of your website.
- Expand the left sidebar.
- Click on Appearance.
- Select Editor or Theme Editor.
- You’ll see a Heads up! message warning you of the things we mentioned. Click on I understand!
- The stylesheet file (style.css) will now open. Double-check the right theme is chosen in the top right corner.
- Be aware that any changes to style.css will reflect across your website.
- You may also have several assets listed under “Theme Files” on the right-hand side. For example, print.css or style-rtl.css.
- Once you’re done, click on Save Changes or Update File at the bottom.
- Preview changes you made.
2. Edit WordPress CSS via Theme Customizer
Another option built into WordPress is Customize or Live Preview. It’s far more beginner-friendly since you can see the results of your changes immediately. However, it’s only intended for minor CSS changes and only applies to a current page or post you’re viewing. If that fits your needs, follow these instructions to alter CSS using WordPress Theme Customizer:
- Log in to your WordPress Admin dashboard.
- Click on Appearance in the left sidebar before selecting Customize.
Tip. You can also open a post or page you want to edit while logged in before clicking on Customize in the top left corner.
- Choose Additional CSS from the list of options on the left side.
- You’ll most likely see a blank text box. Enter your CSS into it, and you’ll see results on the page/post in the real time.
- Modifications won’t be saved until you click the Update or Publish button in the upper right corner of the Customizer.
Note. By default, Additional CSS will save up to 25 revisions of code at a time. Changing a WordPress theme will wipe the content of the text box clean or automatically apply the latest revision on that theme. However, the last saved revision you made on the old theme will still be accessible.
One thing to note
Additional CSS was designed to overrule CSS code defined in style.css without having to make changes to it. While undoubtedly convenient, you may run into problems if the creator of your theme added the “!important” rule to any property or an element. That would make that value or property more important, and negate any changes you make. The only way to solve is to find it and delete the rule, or add the rule to an element with higher specificity via Additional CSS.
3. Make changes to CSS directly via FTP
The two methods above are great when you have access to the WordPress backend. However, what if you get locked out of WordPress Admin, whether you messed up CSS or encountered another issue? To fix the problem, you’ll need to reach your WordPress website’s files and make changes directly. Luckily for you, we have a detailed guide on accessing your WordPress website using FTP (File Transfer Protocol). The things mentioned in method 1 apply here, too. Only use it when you need to fix a problem, and you’re 100% confident and want to make global changes on a child theme.
With that acknowledged, you merely have to:
- Visit the following location: root/wp-content/themes/your-theme-name/style.css
Tip. The root folder can be named public_html, yourwebsitename, or have a generic name.
- Optional. Make a copy of the style.css file, and name it “style-old.css”, for instance.
- Right-click on style.css and select View/Edit.
- Make necessary changes and save the file.
- The file will be reuploaded. Visit your website’s frontend to check the result.
4. Edit CSS using a WordPress plugin
Like with many actions that require intermediate knowledge, installing a WordPress plugin can bring them down to a beginner/moderate level. Additionally, you remove the chance of wreaking havoc, since the plugin will either prevent the code from executing or you can disable the plugin to revert changes. Finally, CSS plugins can help override other code and will ensure your changes persevere even after you install a different theme or update the current one.
Which plugin to choose?
The choice is yours entirely. You can find one that is lightweight and won’t slow down your website noticeably. Alternatively, get a full-fledged CSS editor akin to page builder WordPress plugins. We’ll demonstrate the procedure with a popular example on the WordPress repository. We’re not affiliated, but it’s undeniable it has no unnecessary features. and thus nearly no impact on performance. To begin to edit CSS, install Simple Custom CSS Plugin for WordPress.
After activation, expand the sidebar on the left-hand side of the WordPress Admin Section. Click on Appearance → Custom CSS. Enter your code and click the Update Custom CSS button to apply changes.