Reader Question: How to look at the computed style of an element?
We recently got a question from Michael, who asks:
When troubleshooting CSS issues, how can I determine the source of a style that is applied to an element?
My favorite way to figure out how an element is getting its style is to use the Element inspector in the Safari or Chrome browser. Let’s use the web page at Starbuzz Coffee as an example. Load the page in one of these browsers, and then open up the inspector. In Safari, use the Develop > Show Web Inspector menu, and in Chrome, right click on any part of the page and choose Inspect Element.
Once you have the inspector open, make sure the Elements tab is selected. It should look like this:
Here, I’ve selected the “header” <div> element in the main window on the left, and on the right, I’ve opened up the Computed Style and Styles inspectors. These are incredibly useful tools for figuring out where the style of an element is coming from, which is helpful especially if you’ve got a lot of CSS!
Notice, that in the case of the “header” <div>, the matched rules (ie, the rules I specifically wrote for #header) show the background-color, margin and height properties. Also note that my user agent (that is, the default CSS in the browser) is setting the <div> to block display. The font-family and font-size are being inherited from the body element, which I’m also setting in my CSS.
Now, to see all the CSS that the browser has computed for the “header” <div> at the time the page is inspected, look in the Computed Styles section. Notice that you can find out the values of properties you’re not setting directly, like the current width and height of an element, using Computed Style.
You can usually find any discrepancies between what you think the style of an element should be and what it actually is by comparing the Computed Style with the styles you (and your user agent) are setting on the element.
I hope this answers your question Michael! Good luck finding your CSS bug.