CSS Tutorial / Inspect CSS with DevTools: Styles and Computed

Browser developer tools let you inspect which CSS declarations match an element and which values are ultimately used. Styles explains matching and overridden rules, while Computed helps you check the resulting property values; edits in DevTools are normally temporary.

Prepare the example and expected result

Save the entire code below as index.html in UTF-8 format and open it in your browser. In this example, the operating hours paragraph is shown in green and the first general paragraph is shown in gray. The notice included 16px padding and a light background to enable comparison of results by attribute.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Since we placed the CSS in the style element along with the body HTML, the source for the exercise is one file. If you are already practicing with external CSS, you can put the same rule in style.css, but the file name and line number displayed in the developer tools will be different. After confirming that the expected text appears on the screen, open developer tools.

Select the correct element in Elements

1. Right-click the sentence “We open at 9 a.m. every day.” on the page and choose Inspect. In Chrome or Edge on Windows, you can also open DevTools with F12 or Ctrl+Shift+I.
2. In the Elements tab, check that the selected line is <p class="notice">. If another element is selected, press the element selection tool and select the notice again. The location of tools and menu language may vary depending on browser/version.
3. Open Styles next to or below the selected element. Notice that both the .notice and p rules are visible. In narrow windows, panels may be placed at the bottom or some tabs may fit into the Overview menu.

What Elements exposes is the Document Object Model (DOM), which is the document structure interpreted by the browser. It doesn't always look the same as the page source. When a browser corrects incorrect HTML or JavaScript replaces an element, the actual selection must be determined against the structure shown in Elements.

The screenshot shows the English example inspected in Microsoft Edge 155 using its built-in DevTools remote inspector. Computed is open beside Styles and filtered to color. In the usual docked DevTools layout, select the Computed tab to check the same values. Panel placement can differ, while the selected HTML element and matching declarations remain the relevant evidence.

Compare Styles and Computed

Styles displays rules that match the selected element, inline styles written directly on the element, and inheritance-related rules. Both p { color: #666; } and .notice { color: #087f5b; } match the notice, but the final text color is green. This is because the class selector has higher precedence than the element selector in the same origin/importance/layer condition in this example.

If you see a strikethrough in a gray colored declaration, first check the possibility that it is not “the syntax was wrong” but rather “another declaration won”. The meaning of strikethroughs and warning signs may vary depending on the location and situation, so hover your mouse over the declaration and read the explanation. padding: 16px is a separate property from color, so even if there is a color conflict, they can be applied together.

Computed is used to check the final computed style for the selected element. Open the tab and enter color in the filter to find the text color. #087f5b may be displayed as rgb(8, 127, 91), and they are the same color. Expand a property to track related rules and sources. Some properties may be hidden in the default list, so check the display options as well.

The Chrome DevTools CSS features documentation explains the panels and how to edit declarations. To understand why declarations conflict, compare the conditional examples in the CSS Inheritance, Specificity, and the Cascade.

Toggle declarations and edit values

1. In Styles, look for the .notice declaration of color: #087f5b. Unchecking the box next to a declaration will only temporarily exclude this declaration. As a result, confirm that the color of the notice changes to gray for the p rule.
2. Turn the checkbox back on to return it to its original green color. Then click the color value and change it to #1d4ed8 and press Enter. Verify that only the text in the notice changes to blue and the background color remains light green.
3. Check the text color again in Computed. If it says rgb(29, 78, 216), it matches the blue color you changed. The background is a separate property called background-color.
4. This lab did not set up a save connection or Local Overrides, so when you refresh, the color you changed in Developer Tools will disappear and you'll be back to the original green color. After confirming that the original has not been changed, proceed to the next step.

Declarations that have been cleared can be restored by turning the checkbox back on, and incorrectly changed values can be restored by re-entering the existing values. If you want to remove all other changes at once, refresh without turning on the save function, as in this exercise. If you have turned on workspace linking or local override, the way it is saved and maintained may change, so do not assume that it will be restored with a refresh.

Save a confirmed change to the source file

Click a rule's source filename and line number in Styles to locate it. Because this example embeds CSS in HTML, edit the corresponding rule in the original index.html. For an external stylesheet, open the file identified there, such as style.css. Check the path before editing a similarly named copy. For further detail, see Apply CSS with Inline, Internal, and External Styles.

1. Open the index.html you actually had open in a text editor. If you copied the file to multiple folders, make sure the file path matches the browser address.
2. Change the color value of the original .notice rule to #1d4ed8 and save.
3. Refresh your browser. Now, if you open it again and the notice appears in blue, it has been reflected in the original.
4. To return to the original design after completing the exercise, restore the original color to #087f5b and save/refresh.

Distinguish three common CSS failures

For each situation, change the original one by one, save/refresh, check, and then revert. In the first situation, .notcie rules that do not match the selected element may not appear in Styles' list of commonly applied rules. In the third situation, the way the warning appears varies depending on where it was created and the browser version. By dividing the cases into cases where there is no rule, there is a rule but it has been overwritten, and the declaration itself is invalid, you can see where to fix it.