How to Add a Custom CSS to Your WordPress Theme

I would recommend you to make all your customizations in a child theme. Do not add your custom css to the parent style.css file. The reason why should not modify it is because when you update the theme those modifications that you have made will be overwritten.

Customizing child theme’s style.css file allows you to make your own changes without affecting the parent theme’s style.css, which is perfect because you can easily update your original theme without loosing any custom styling.

Open your child theme’s stylesheet and add custom CSS styles to the bottom of that file. You can edit your file either using a FTP client or Dashboard Editor ( Appearance > Editor ).

You don’t need to copy all of the CSS from the original theme to modify an element. Let’s say you want to change a background of a button:

Original CSS:

.button {
  background: #ed463d;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 4px;
}

Child Theme CSS:

.button {
  background: #3dc4ed;
}

Custom CSS Plugins

There are a few WordPress Plugins available in the Plugin Directory that add a CSS editor to your Dashboard. So, you don’t need to modify your theme’s files. My favorite is Simple Custom CSS Plugin by John Regan. Check out other Custom CSS Plugins below:

• Custom CSS (by Jetpack)
• Custom CSS Manager
• My Custom CSS