WordPress offers incredible options to customize the look and feel of a WordPress site in a number of ways. Almost all themes give you options to change whatever you want according to your needs and with a small effort done with editing code and CSS so you can completely change the looks of your blog.

We will see different ways to find and edit CSS code in WordPress and change it.

What is CSS

CSS is not something only related to WordPress only. CSS is Cascading Styles Sheets used in websites to style different elements. There are two building blocks of any website HTML and CSS. HTML is used to define the structure of a website and web browsers parses HTML to render and show the web page.

css vs html

CSS, on the other hand, does the real fun part as it is used to style the HTML to present information in an interesting way. You can “attach” a CSS style to HTML tags by defining a class. These CSS classes point to a specific style in a separate CSS style sheet to define styling on the front-end.

WordPress uses a file style.css placed in every theme folder. The style sheet holds all the styling information for that specific theme.

Woopoo's Tip

CSS Code Example

For example a <div> HTML tag could be <div class=”xyz”> to get the styling from the class name xyz.

.xyz {
 color: blue;
 text-decoration: none;
 font-weight: bold;
}

.xyz in the example above is a selector. color, text-decoration and font-weight are the properties which define the styling.

The otherwise boring <div> tag just got a life with CSS styles incorporated.

How to find a div class in WordPress?

In WordPress, most of the time you will find yourself make changes to already defined CSS classes instead of creating new ones. There are two methods to dig deeper and find a class in WordPress.

  • Using a web browser (Chrome, Firefox, Safari)
  • Using a CSS plugin

Finding div class using Chrome

The example below uses Chrome browser but same options can be found under Firefox, Safari and other browsers. Chrome Browser has a versatile set of debugging tools they called DevTools. What else could be more good that the tools come built-in and you don’t need to install anything.

Let’s say we want to change the color of the main navigation bar in WordPress default theme twenty seventeen (2017). To complete the task, we first need to know the class name. Let’s see the Devtools in action for the given task.

The steps below assumed you have already installed WordPress and using twenty seventeen theme.

  • Open your WordPress site in Chrome browser, right click on the site navigation bar and click Inspect.

chrome inspect

  • Look for the <div> tag which holds the navigation class. In the example below, you can see the class name is navigation-top.

chrome devtools class

  • Clicking on the <div> tag will reveal its CSS properties in a window on the right-hand side.

wordpress navigation class

  • Guess which is the property we are interested in to change background color? Yes, it is background. You can test the background color here by clicking the tiny square in front of background property.

You can make a note of hex color value to change the color later on.

Woopoo's Tip

Finding CSS class Using a Plugin

If the above method seems too daunting to you then you can also use a plugin for the same purpose. The best plugin we have found to find and edit CSS class in WordPress is SiteOrigin CSS. Let’s see how to use it.

wordpress plugin siteorigin

  • Go to plugin settings from your WordPress dashboard Appearance > Custom CSS.
  • Enter Preview mode by clicking the Expand button. It will allow you to click any element of your website to know its CSS name.

plugin expand button

  • Click the main navigation bar to reveal its CSS class name at the bottom of the screen.

find css in wordpress

  • You can see the class name is navigation-top and corresponding property background is appearing in the right-hand column.
  • You can change values right inside this plugin or any of the methods we will discuss in the next section.

How to use CSS in WordPress?

Once we are done with finding the “culprit” CSS class :), it’s time to edit CSS in WordPress using the already found class name so that the changes take affect permanently.

We will see three different ways to customize CSS in WordPress:

  • Directly edit code in style.css file.
  • Using Theme Customizer.
  • Using a CSS plugin.

Editing style.css

style.css file in WordPress is a theme-specific file. For example, if we need to change CSS for twenty seventeen theme, the location of style.css will be wp-content > themes > twentyseventeen directory. The file usually resides inside the theme folder you are using.

The other way to edit style.css in WordPress is through it’s own editor.

  • From you WordPress admin dashboard, go to Appearance > Editor.
  • You will see a list of theme files on the right hand side. Click Stylesheet to open the file to edit. The name of the file should be style.css
  • Look for .navigation-top class. You can use Find (Ctrl+F) to find the class name.
  • Update the color for background property. Hint: write hex color picker in Google search.

wordpress editor

  • Click Update File to apply changes.

Any changes you will make to theme files will be over-written when the theme gets updated next time.

Woopoo's Caution

Any editing you have done to your theme files might get over-written when you will update the theme or it will get updated automatically. The solution is to use a child theme.

See our article how to use a child theme in WordPress.

Using Theme Customizer

Using theme customizer is the recommended way of making CSS changes to your theme.

  • From your WordPress dashboard, go to Appearance > Customize > Additional CSS.

wordpress css

  • You already know the class name. Write the following code in Additional CSS editor window and save changes.
.navigation-top {
 
background: #1b7c4c;

}
  • You can change the color with your own color. Updating themes will not affect this code.

Edit CSS Using a Plugin

Although a plugin is not needed as theme customizer can handle the task efficiently but a plugin like SiteOrigin CSS can also be used for the same purpose. SiteOrigin CSS has its own CSS editor to write code.

css editor plugin

Here is what we have get by customizing the CSS for the navigation menu:

menu before
menu after

Conclusion

In this article, we have seen different methods how to find and edit CSS in WordPress. We also see an example by changing the color of main navigation bar in a WordPress theme.

Same methods can be used to find any class in WordPress and changing its properties accordingly.

If you still have any questions do let us know using the comments section below and don’t forget to follow us on Twitter and Facebook

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This