Debugging CSS

Page One

Use this page to learn more about the browser Inspector's display of the relationship between Elements and their Styles.

  1. Click on the main content area in the viewport and right-click to choose the Inspect menu (Chrome) or Dev Tools (FireFox).
  2. With the <main> tag selected on the left window, the correlating CSS renders on the right window. You can see that the background has a 90% alpha opacity setting on the RGB color white, with a border radius of 5px, and padding of 5%.
  3. Now click on the <body> tag in the left window to see what styles are specified. The <body> has an orange background color that covers the entire viewport, with top and bottom margins of 5%, and left and right margins of 10%.
  4. Click on the <nav> tag in the left window to view its style on the right window. Notice that it has no style rules defined; it just lists the browser's default settings (which are specified in italics).