At this point, we’ve covered the basic fundamentals of CSS and keeping organized. Now, it’s time to get into the actual, practical details of finding styles applied on your website and overriding them from your child theme.
Don’t Dig Through Files
I often get questions in customer support like this:
What file of the theme can I find the CSS to change [something]?
The truth is, if you’re asking this, you might not be taking the right approach to all this. At this point, I’m sure you realize that you shouldn’t be editing physical theme files, but instead making all of your edits from your child theme. However, what you might not realize is that to find those styles to edit, you also don’t need to look in any physical CSS files (usually, anyway).
Let’s face it. Customizing your WordPress website can be complex. In reality, you’re going to have many different CSS files included from the theme and your plugins. So, if you’re digging through individual files to try and figure out what’s doing what, you’re just never going to get anywhere.
Use Your Browser’s Developer Tools
The reason I say you shouldn’t be digging through physical CSS files is because there’s a much, much better way. And that’s to use your web browser’s developer tools to inspect the areas of your website, that you want to override.
If you’ve never done this before, using your browser’s developer tools to inspect and instantly find CSS rules to override, will be like flipping the lights on in the room, when you can’t find the flashlight.
However, it still takes some practice, and this is all part of learning web development. Simply put, it will be worth your time to become an expert at using your browser-of-choice’s developer tools. This will help you tremendously, in the long run.
When someone says to me in customer support, “I’ve been looking for hours but I can’t figure out how to change [something] in the CSS?!” — Do you think I remember how I styled some little thing, in a complex WordPress theme, several years ago? Spoiler alert, I have no idea! So I look at their website, inspect with browser’s developer tools, and within seconds, I have an answer. Having that ability will change your life.
Which Web Browser to Use
Here, I can only give you my personal opinions, from my experience. By no means am I telling you what you need to use. This is just my suggestion.
Personally, I use Google Chrome as my default web browser, for all of my web development. The biggest reason I use Chrome is because it has my favorite set of developer tools. And whether I’m on a Mac or Windows, I’m using the same tools.
Firefox also has pretty great developers tools. It used to be that you had to install a popular extension called Firebug, but now Firefox comes with a great set of developer tools built right in. This more-or-less eliminates the need to use Firebug. With that said, I still personally prefer to use Chrome the majority of the time.
If you’re Mac user and you’re new to web development, Safari might be your current default browser of choice. However, I’d suggest not developing in Safari, as I feel their developer tools aren’t nearly sufficient, compared to Chrome and Firefox.
So with all that said, as I discuss further tips in this article, I’ll be using the Chrome browser in all examples.
How to Access the Developer Tools
When in Chrome, there are a couple of different ways to bring up the developer tools.
The first way is to open it from the Chrome application menu bar by navigating to View > Developer > Developer Tools.
As you become efficient at using the developer tools, you’ll find it’s quicker to use the Inspect method. — Simply right-click on area of your website and click Inspect, from the menu that appears. You can also use this method, while the developer tools are already open, to quickly jump to another section on your website, within the inspector.
Using Developer Tools
Now, with the inspector of your developer tools, the whole point is to figure out what is already styling the thing, that you want to change. Knowing this, will allow you to ultimately override it from your child theme’s stylesheet, to make the customization.
To do this, you’ll be utilizing the Elements tab of the developer tools. You’ll use this to locate the HTML element you want to change, and then see what styles are currently affecting it.
Applying CSS Overrides
Remember in our first CSS article, when we talked about order and specificity, to determine what CSS takes effect? Well, that becomes important here. We need to know what to put in our child theme’s stylesheet, to override whatever styles are already being applied.
This is why our inspector is so helpful. When an HTML element is selected in the left panel, the applied styles are listed in the right panel. And those applied CSS rules are listed in relevant order, with highest precedence at the top. So, you can use this to build an appropriate selector for whatever you’re wanting to style, that you know will take precedence.
And remember that your child theme’s style.css file is already included in your site, after all styles of the theme. So in many cases, when things are confusing, you can often just copy the top selector that’s listed there to your child theme’s stylesheet, and go from there.
Advanced Tips
Here are some tips for using the Chrome inspector to find some things, that trip a lot of people up.
Hover, Focus and Active State
It’s easy enough to find what styles are effecting an element, but what about dealing with something where you need to know what’s being applied, during a certain state of an element? For example, maybe you want to find what styles are applied to a thumbnail image, when the user hovers over it.
In the screenshot above, I’ve enabled the hover state for the image thumbnail’s wrapping link. Now, I can even click on different elements within the thumbnail, in order to see how the hover state is affecting them, as well.
Don’t Forget About Content Pseudo Selectors
Often, theme authors can get tricky with their styling. It’s possible some elements may not actually exist in the HTML markup. We can do this by using pseudo selectors, :before and :after. So, when you’re trying to figure out where some little icon or background added to an element, might be coming from, remember to look at :before and :after.
Detaching the Developer Tools Window
This is really helpful when you’re adjusting the size of the browser window often, or you’re trying to design responsively. You can actually pop the inspector out into a separate, vertical window.
After selecting to pop out the inspector, you’ll now have two separate windows like the following.
Note there’s also a mobile-specific editing interface that was added in 2015, I believe. It’s pretty cool, but I find that I don’t really ever personally use it.
Writing and Previewing CSS in the Browser
In your developer tools, you’ll find that you can actually edit certain styling rules, for a live preview directly in the browser. This gives you a chance to see what a change looks like, before copying it to your own child theme stylesheet.
This can be helpful for small bits, but can quickly get confusing if you’re adjusting multiple elements, at a time. I like to use a free extension, Live CSS Editor, to write out a section of CSS.
I use my inspector to determine my selectors and styling rules, and build it out in the Live CSS Editor window. Then, when I’m ready, I copy it to my stylesheet. This allows me to work on a section of changes, and preview it in real-time, without having to keep going back and forth between saving my physical stylesheet and refreshing the browser.
Note: Live CSS Editor extension is available for both Firefox and Chrome.
Conclusion
It may seem like a lot to digest, at first, but trust me when I tell you it’s important to invest time into being a pro at using your browser’s developer tools. The quicker you can locate what’s styling something, the quicker you can override it from your child theme’s stylesheet. This will lead to better productivity, and most importantly, much less frustration.