There are several options to edit CSS in WordPress. You could change the theme, use the Cus­tomiz­er or one of the numerous rec­om­mend­ed plugins.

$1 Domain Names – Register yours today!
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

What is CSS used for in WordPress?

Aside from WordPress themes and templates, CSS in WordPress is an important and useful tool to design a website according to your ideas. CSS (Cascading Style Sheets) is used to design websites and lets you customize its layout, colors and ty­pog­ra­phy.

Why cus­tomiz­ing CSS in WordPress is important

There are various reasons why you may want to edit CSS in WordPress. While content is defined using HTML, CSS ensures that the content is presented in an appealing way. For this reason alone, it’s worth learning CSS.

CSS doesn’t just have optical ad­van­tages, but can be used to make a website more re­spon­sive and optimize it for different devices. Cus­tomiz­ing CSS in WordPress is par­tic­u­lar­ly easy when using WordPress themes.

What are the options to add CSS in WordPress?

You’ve got plenty of different options to customize WordPress CSS. The simplest one is to use the Cus­tomiz­er which pre­de­fines in­di­vid­ual working steps and editing CSS follows fixed rules. If you’re familiar with WordPress and prefer a more per­son­al­ized design, you can manually edit themes in WordPress. While this is a little more demanding, you’ll have more freedom. Al­ter­na­tive­ly, plugins are another good option to edit and customize WordPress CSS. In­di­vid­ual features will vary from one plugin to another.

Tip

Want to get started building a website using a content man­age­ment system? Hosting for WordPress from IONOS is the perfect solution for CMS. Benefit from 100% SSD storage, unlimited traffic and daily backups!

Add WordPress CSS using a theme

To edit WordPress CSS via a theme, it’s a good idea to create a child theme first. This way you rest assured you’re not deleting the changes you made by updating the theme. The most important ad­just­ments are made in the stylesheet, which is used to embed CSS in HTML. You can easily access this from your dashboard. You won’t need any ad­di­tion­al programs or editors and can also make changes via FTP.

Via the dashboard

To customize WordPress CSS follow these steps:

  1. Back up your WordPress website. This prevents errors from dis­rupt­ing your entire online presence. If you haven’t done so already, create a child theme.
     
  2. Log into the backend.
     
  3. Search for the style.css file. This is your stylesheet. You can locate the file in the menu in “Ap­pear­ance” > “Theme File Editor”.
     
  4. A pop-up window will launch with a warning to not make changes to files. If you’ve created a child theme and backup already, then you’re on the safe side. Agree and continue.
     
  5. Now you can edit the CSS. Be aware that most of the changes will be applied globally. So you’re not only editing a specific area, but every page and subpage that contains the area. To edit a specific subpage only, specify it first.
Image: Screenshot of Theme File Editors in WordPress dashboard
Use the Editor to make changes to a theme.

Via the FTP client

Even if you don’t have access to the Theme Editor or prefer not to use it, you can edit the CSS in WordPress. All you need is an FTP con­nec­tion to your website.

  1. Install the FTP client.
     
  2. Log in using your FTP account data.
     
  3. Your stylesheet should be in “wp-content”. You’ll also find a subfolder with the name of your theme and the style.css file.
     
  4. Right-click the file and select “View/Edit” to make changes.
     
  5. Once you’ve finished editing, save the file and upload it to the server.
Image: Screenshot of FileZilla with select stylesheet file
You can edit the CSS in WordPress without access to the Theme Editor using an FTP client.
Tip

The perfect web address for your website! Register your domain with IONOS and choose the name that’s right for your web project. Benefit from plenty of useful features such as domain lock, wildcard SSL and 2GB email storage.

Edit WordPress CSS using Cus­tomiz­er

For in­di­vid­ual ad­just­ments and to check changes im­me­di­ate­ly, the Cus­tomiz­er is a useful option. You won’t need a child theme and any update to the theme won’t delete your progress. However, if you choose to add a new theme, some or all of your changes may not be applied. The steps are as follows:

  1. Create a backup to prevent possible errors.
     
  2. Log in to the backend.
     
  3. Find the Cus­tomiz­er under “Design” in the left-hand menu.
     
  4. Scroll down and click “Ad­di­tion­al CSS”.
     
  5. This launches an interface to enter your code into. With live preview, you can monitor in real time how changes made to the WordPress CSS will appear. The Cus­tomiz­er points out errors in the code.
     
  6. If you’re satisfied with your edits, save the changes, publish them or schedule them for pub­li­ca­tion.

Note that when using the Cus­tomiz­er, changes are applied to all subpages unless specific pages are selected.

Image: Screenshot of WordPress Customizer with added CSS
Use the Cus­tomiz­er to add CSS to WordPress.
Managed Hosting for WordPress
Create your site with AI, we manage the rest
  • Stress-free, no matter your skill level with easy AI tools
  • Fully cus­tomiz­able with themes and plugins
  • Hassle-free updating and less admin

Plugins to add WordPress CSS

To minimize the risk of losing changes in the CSS when swapping a theme, you can use a plugin instead. Various tools are suitable for this, some of which are free of charge. Below is a selection of popular plugins for this purpose.

Simple Custom CSS

One of the top plugins to customize CSS in WordPress easily or add your CSS is Simple Custom CSS. It’s all in the name, es­pe­cial­ly when it comes to setup and usage. The plugin is easy to use and quick to learn and offers some great benefits. Simple Custom CSS doesn’t neg­a­tive­ly affect the per­for­mance of websites and checks for errors. Syntax high­light­ing is another useful feature. What’s more, the plugin works with all popular themes.

CSS Hero

CSS Hero costs $29 a year and is a very com­pre­hen­sive yet user-friendly solution. It’s par­tic­u­lar­ly suitable for designing and cus­tomiz­ing CSS in WordPress. Changes can be live-tracked and there are plenty of in­di­vid­ual design options. While the tool may be too extensive for smaller changes, CSS Hero is a great option for changing multiple details at once. The plugin is com­pat­i­ble with various themes.

Tip

Plugins can greatly simplify working with WordPress and adding ad­di­tion­al features. Find out more about the benefits of plugins in our Digital Guide:

Site­O­ri­gin CSS

If you are looking for a more stream­lined solution for sporadic cus­tomiza­tion, Site­O­ri­gin CSS is a good choice. The plugin offers the option to switch to a visual editor, allowing you to make changes without code. It’s a great feature for beginners and novices alike. Site­O­ri­gin CSS is com­pat­i­ble with numerous themes.

WP Add Custom CSS

WP Add Custom CSS offers similar benefits to Simple Custom CSS, but takes things a notch further. You can use WP Add Custom CSS to edit the CSS, but also select in­di­vid­ual pages and subpages. Changes aren’t applied globally, but only across select pages. This is achieved through a small metabox that you can use in addition to the actual editing screen.

Con­clu­sion to cus­tomiz­ing WordPress CSS

For minor ad­just­ments and major stylistic decisions alike, various tools are available for working with WordPress CSS. Plugins are a great option for applying more extensive changes, while themes or the Cus­tomiz­er are more suitable for changes to fonts or colors.

Go to Main Menu