A large number of support questions we field on a regular basis ask,
How do I change the CSS for a specific element on a web page?
The answers to these questions can usually be found quite easily if you know how to use your browser's inspect tool. All major browsers these days have a code inspection tool. Viewing CSS is just one of the many functions these tools provide. You can also use them for testing JavaScript and jQuery, or troubleshooting complex network activity like Ajax calls. Truthfully, as developers we'd be lost without them. And while the inspect tool in all of the browsers work similarly, you'll still have to learn the specifics of your browser's tool to understand its nuances. For your convenience, here are links to popular browser developer tool documentation:
This tutorial will use Firefox and focus on how to troubleshoot/test your CSS. Firebug, a once popular debugging extension for Firefox, is no longer being actively developed or maintained. The Firebug developer now recommends using the built-in Firefox developer tools, of which the CSS inspector is a component. Mozilla offers a developer version of Firefox that contains the latest and greatest tool set. Chrome offers its latest features in Chrome Canary. Be forewarned though, both Firefox Developer Edition and Chrome Canary are bleeding edge browsers with experimental features. Both are considered unstable and may be subject to crashing.
Inspect Tool is a Right Click Away
- To get started, hover over an element you want to inspect and right click on it.
- Click Inspect Element
We'll be examining one of the links in this article. The image below shows the result of hovering over the Chrome DevTools link, using right click, and selecting inspect element. The large numbers in the image have been added for clarity.
Wow! That's a lot to absorb. What are we looking at exactly?
- Live page in the browser
- HTML source code window
- CSS window
- JavaScript console for testing code (Ignore it for this tutorial)
Windows 1, 2, and 3 allow you to scroll them independently. Windows 2 and 3 are linked so that when you click on an element in the HTML source code window, the CSS applied to that element will display in the CSS window.
In the browser window, the Chrome DevTools link is blue. When you hover over it, it turns black. Look at the CSS on the right, the blue color is applied from a class called .parallax-pro-blue a. This class can be found in my child theme's style.css file at line 2157. In Firefox, the active class is highlighted in blue and the file name and line number at which the class can be found can be seen to the right of the class. Classes that impact hover or other momentary changes, may not be readily visible in the CSS window. For those classes, you have to edit the style sheet to find them.
A really neat feature of the CSS inspection tool is that you can perform non-destructive testing to try different CSS directives for any element on a page. The CSS inspection tool is also an editor. By non-destructive, I mean it doesn't permanently change anything in your style sheet. It only changes things for your current browser session. You can experiment with padding, margins, colors, or any CSS directive you'd like. If you make a mistake or don't like the results, simply refresh the page in the browser and everything returns back to normal. Once you've tweaked the CSS exactly as you want it, copy your changes to the style sheet in your code editor and save it.
Thank you. I hadn’t realized that there was a tutorial at Chrome. I dip into working on my website at intervals separated by years so getting back up to speed on CSS is always a trial. This was most helpful.
Hi Victor,
I have a question that i think lots of newbie like me would like to ask: how to get the image link if it’s not in <img tag? Please have a look my screenshot : http://imgni.com/i/oo40
You didn’t drill down far enough in the example you provided. What you are looking at is not an image, it appears to be a custom icon font. If you open the span, you’ll see what’s known as a pseudo element. In this case, it’s the before element:
<div class="img alignleft one-fourth first"><span class="icon-bubble">
::before
</span>
</div>
You can learn more about pseudo elements here: https://www.w3schools.com/css/css_pseudo_elements.asp
If you inspect the before element, you’ll see this css:
.icon-bubble::before {content: "\24";
}
[class^="icon-"]::before, [class*=" icon-"]::before {
font-family: "studiopress" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
This code is displaying a specific icon font from a custom font family named studiopress. There is no image.
Sorry for overlooking, now i understand it correctly, thanks.