The Inspect Element tool is great when it comes to debugging your web pages in real time.
you’re able to use this tool to help preview and change the design of a website.
It also allows you to do so without needing to reload the page, displaying your CSS changes immediately.
This article will go through how to view CSS classes and their applied styles in the Inspect Element window.
This tutorial will usea sample websiteto demonstrate.
you could bring up the Inspect Element window in Google Chrome by pressing theF12key.
you’ve got the option to also right-click anywhere on the page and click onInspect.
The Inspect Element window will open to the HTML code for the part of the website where you right-clicked.
This is where you’ve got the option to alsoedit website text using Google Chrome.
you’re free to see the HTML code on the left of the Inspect Element window.
you might find the CSS code to the right, under theStylestab.
Any styling applied to the “card-padding” class would show on the right, under theStylestab.
What Does element.style Mean in the Styles Tab?
Each HTML element that you highlight in the Inspect Element window has an element.styles block.
you could use this technique instead of making changes to your local code and reloading your app.
it’s possible for you to still re-run your app to test that your new CSS changes still work.
There are many other interesting things you could do with the Inspect Element window.
