There are several options to edit CSS in WordPress. You could change the theme, use the Cus­tom­izer or one of the numerous re­com­men­ded plugins.

Cheap domain names – buy yours now
  • Free website pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

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, colours and ty­po­graphy.

Why cus­tom­ising 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­vant­ages, but can be used to make a website more re­spons­ive and optimise it for different devices. Cus­tom­iz­ing CSS in WordPress is par­tic­u­larly easy when using WordPress themes.

New call-to-action

What are the options to add CSS in WordPress?

You’ve got plenty of different options to customise WordPress CSS. The simplest one is to use the Cus­tom­izer which pre­defines in­di­vidu­al working steps and editing CSS follows fixed rules. If you’re familiar with WordPress and prefer a more per­son­al­ised design, you can manually edit themes in WordPress. While this is a little more demanding, you’ll have more freedom. Al­tern­at­ively, plugins are another good option to edit and customise WordPress CSS. In­di­vidu­al 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 customise 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­tom­izer

For in­di­vidu­al ad­just­ments and to check changes im­me­di­ately, the Cus­tom­izer 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­tom­izer 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­tom­izer points out errors in the code.
     
  6. If you’re satisfied with your edits, save the changes, publish them or schedule them for pub­lic­a­tion.

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

Image: Screenshot of WordPress Customizer with added CSS
Use the Cus­tom­izer 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
  • Full cus­tom­isa­tion with themes and plugins
  • Hassle-free updates and less admin

Plugins to add WordPress CSS

To minimise 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 customise CSS in WordPress easily or add your CSS is Simple Custom CSS. It’s all in the name, es­pe­cially 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­at­ively affect the per­form­ance 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 around £24 a year and is a very com­pre­hens­ive yet user-friendly solution. It’s par­tic­u­larly suitable for designing and cus­tom­ising CSS in WordPress. Changes can be live-tracked and there are plenty of in­di­vidu­al 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­ible 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­Ori­gin CSS

If you are looking for a more stream­lined solution for sporadic cus­tom­isa­tion, Site­Ori­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­Ori­gin CSS is com­pat­ible 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­vidu­al 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­tom­ising 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­tom­izer are more suitable for changes to fonts or colours.

Go to Main Menu