HTML and CSS Reference
In-Depth Information
Figure 7-1:
Inspecting an element.
If you want to inspect a specific DOM element on the page, you can also right-click (Ctrl-click on a Mac) on
any DOM element on the page and select Inspect Element. On the left, this shows you the location in the page's
HTML of the element you clicked. On the right, it shows all the properties for the element. The most prominent
details are the CSS styles, which display from the least specific at the bottom up to the most specific at the top.
Styles that have been overridden by more specific styles are crossed out.
You can enable and disable specific styles by clicking the check box to the right of that style. You can also
edit an existing style by clicking either the property or the value, or add a new style by clicking the closing curly
bracket below the style. Deleting the property name also removes the property from the style entirely.
To view the end result of the application of all the styles, open the Computed Style tab above the Styles tab.
This is useful, for example, when you want to figure out pixel-based values, such as the width of an element in
pixels when elements are sized in percentages.
Below the Styles is the Metrics tab (see
Figure 7-2
) that shows the box model representation of the current
element.
