There are 3 easy ways to add custom CSS to your WordPress site, You can use JetPack Custom CSS feature, use WordPress’s default CSS box or add custom CSS using a child theme.

In this tutorial, I am going to explain How to Edit CSS in WordPress Themes. There are different ways to edit CSS in WordPress themes. I am going to explain best and recommended method to edit CSS in WordPress themes.

Thousands of free and premium WordPress themes available and you can install the perfect theme for your WordPress site. No matter how hard you try, I am sure whatever theme you decide to install on your blog, there gonna be something you might like to change.

You can directly edit any WordPress theme file within the dashboard. Simply go to Appearance > Editor > Select any file you want to edit. This is not a recommended method to edit any WordPress theme.

Never ever edit any WordPress theme directly. Always Create a WordPress child theme or use WordPress Plugins to Edit CSS in WordPress Theme.

If you don’t know what is a WordPress child theme and how to create a child theme, we already have published tutorials about child theme development.

If you are a beginner, you can read Step By Step guide to create WordPress child Themes without using any WordPress Child Theme plugin.

How To Edit CSS In WordPress Theme

As I said earlier, never edit WordPress theme files directly. Always create a WordPress child theme or use plugin to edit CSS.

I am going to use JetPack’s Edit CSS module. If you are not using JetPack, You can install Jetpack or any other WordPress plugin to edit CSS.

If you don’t want to install a plugin, simply create a WordPress child theme.

WordPress Custom CSS Using Jetpack

JetPack is a very popular and advanced plugin. It offers a lot of features. With Custom CSS module you can add new CSS styles without any problem.

The Custom CSS Editor allows you to customize the appearance of your theme without the need to create a child theme or worry about theme updates overwriting your customizations.

First, activate the Custom CSS module on the Jetpack dashboard, and then you can access the CSS editor via Appearance → Edit CSS or simply click on Configure link.

When you will first visit the JetPack’s CSS Editor, you will see links to beginner tutorial and Themes and Templates forum.

Let’s suppose you want to change the background color of your main navigation menu items or you might like to change styles of recent post widget.

WordPress’s Default Additional CSS Feature

The latest version of WordPress lets you add custom CSS without installing any additional plugin. Just log in to your DashBoard and go to Appearance > Edit CSS or you can click on Appearance > Customize to view all theme customization options.

Now select Additional CSS option and start writing your custom CS in the box. You can also use Less and SASS syntax. Read more details here WordPress.com CSS page

How To Edit CSS In WordPress Theme Using Chrome Developer Tools

Open chrome developers tools or any other web browser developer tools to edit your webpage. I am a big fan of Chrome developer tools. It makes it very easy to change styles of any webpage with live preview.

Open your site in Chrome browser. Right-click anywhere on the webpage to open chrome developer tools. You can also press F12 or Ctrl+Shift+I to open Chrome developer tools.

To select an element on the page to edit it small arrow icon in the top left corner while Chrome developer tools are open or alternatively press Ctrl+Shift+C.

You can read step by step tutorial Inspect and live-edit the HTML and CSS including videos to learn how to Inspect and live-edit the HTML and CSS of a page using the Chrome DevTools Elements panel.

If you don’t know anything about Chrome Developer tools, Watch this video to learn How To Edit CSS In WordPress Theme Using Chrome Developer Tools.

In the screenshot below, You can see that I have changed the background color for main navigation menu items with some additional padding.

Now I need to copy new CSS styles from Chrome dev tools and paste it into JetPack CSS Stylesheet Editor.

In my case, I will have to add following code to the jetpack CSS style sheet editor.

`
.main-navigation a {
color: #FFF !important;
background: rgba(66, 220, 140, 0.93);
margin: 3px;
}
`

NOTE:

Each time you click Save Stylesheet a revision is saved. Jetpack CSS Edit Module will store the last 25 CSS revisions made to any theme on your blog.

The CSS revisions allow you to look back at the recent changes and revert to an earlier version if you need to.

One last thing, You need to remember is that WordPress Custom CSS will be reset when changing themes. After activating the new theme, don’t forget to add new styles or revert to an earlier CSS version if you need to.