Find, Test & Modify The CSS in Your Themes Style.css File

A very common question beginners ask on web design & theme forums immediately after installing a new theme is:

How do i change the color of……….

In this very simple tutorial, i’ll show you how to use Google’s Chrome Browser to:

1. Inspect the element you want to modify
2. Modify the CSS in your browser to test what the changes look like
3. And then make the permanent changes to your themes style.css file.

1. Find The CSS Your Want To Modify

First step is to place your cursor over the part of your theme where you want to make the changes:

In the above screen shot, i have hovered over a link in the sidebar and then right click it.

The drop down menu appears after right clicking an area so now you can click inspect element.

Once you click inspect element, a window pops up which looks like this:

Looking at the popup window, what does it show you?

You can see the HTML code behind the text that we clicked which is the linked text we want to change: More about me.

The right window displays the CSS which we need to modify which is:

a {
color: #e14d43;
text-decoration: none;
}

Now we can click the link next to that CSS which is style.css?ver.

This takes use directly to the themes style sheet and to the CSS that applies to the text link we clicked as shown above.

2. Test Changes in Browser Window

Now we can test the changes in this window and view them before making the permanent modifications in the themes style.css file.

In the above example, you can see we have changed the color from red to green and also changed the hover color from #000 to orange.

The window also tells us the line in the themes style.css file where we can find the code to modify which in this example starts on Line 178.

Once you have changed the CSS in your browser window and are happy with the changes, you can then make them permanent in your child themes style.css file.

3. Modify Style Sheets CSS

1. Using FTP, navigate to your child themes style.css file and download it.
2. Open the file on your desktop using a code editor like Notepad++
3. Scroll down the Line number where the CSS is that you want to modify.
4. Modify the CSS, save the changes to the file and upload the file to your themes root directory using FTP.

Now that the changes are permanent, you may need to flush or delete any server/plugin/browser caching to view the changes.

These changes will affect the color and hover color of all links across your entire site.

Video Demo 1 Min 50 Seconds

This video shows you exactly the same as whats in the above written tutorial.

Related Tutorials

• What is Firebug