CSS rules can be tricky to analyze. An element’s styles might be defined in multiple places across the CSS file and it may inherit several different styles. There is an easy way to handle this and make the analysis easier…
In Google Chrome, right click on an element to inspect it. By default, you will be looking at the HTML in the “Elements” tab and CSS in the “Styles” pane for this element.
The “Styles” pane shows the different CSS rules that apply to the element. Some rules will have a strikethrough, indicating they are overridden, while others are applied. While useful, this view can be confusing when trying to understand how everything works together.
To simplify the analysis of which CSS rules are applied, you can view the Computed Styles for this element. Next to “Styles”, click on “Computed”. This consolidates all the CSS rules into the final styles applied to this element.
When you hover over any of these computed styles, you’ll see an icon of an arrow in a blue circle. Clicking on that icon will take you back to the applicable rule under “Styles”.
