The Inspect Element tool is ideal for debugging your web pages in real time. You can use this tool to preview and modify the design of a website. It also allows you to do this without having to reload the page, showing your CSS changes immediately.
This article explains how to view CSS classes and their applied styles in the Inspect Element window. He will also explain how you can use it to preview the changes you make to your CSS in real time.
Opening the inspect element in Google Chrome
You can open the Inspect Element window in Google Chrome by pressing the F12 key. You can also right-click anywhere on the page and click Inspect.
The Inspect Element window will open to the HTML of the part of the website you right-clicked on. This is where you can also edit website text using Google Chrome.
The Styles tab in the Inspect Element window
In the Inspect Element window itself, under the Elements tab, there is a place to display both HTML and CSS code. You can see the HTML code on the left side of the Inspect Element window. You can find the CSS code on the right, under the fashions tongue.
Suppose you have an HTML element with a class called “card-padding”, with right and left padding applied:
If you have previewed this website in the browser, you will be able to select the div element with class “card-padding”. Any styling applied to the “card-padding” class would show up on the right, below the fashions tongue.
When you hover over an element in the HTML code view, that part of the webpage is highlighted in the web browser. The HTML element type, along with any class names, will also display in a dialog next to the element.
In this case, you will see the container div with the class names “row”, “card-padding”, and “pb-5” highlighted on the page.
How to make CSS changes in real time
You can modify the CSS directly from the Styles tab:
- Using This siteright click on the first title.
- On that particular h4 header, you’ll see a class applied to it called “text-grey” with a color of #8a8a8a.
- Change the color to something else instead, like orange. You only want to change the value itself, not the property name, “color”.
- You will see the cap change from dark gray to orange.
- If you want to disable a particular CSS style, uncheck the box to the left of the style.
- You can also add other styles to the original set. Click just below or to the right of a property to start adding a new one. You should use the same syntax as in a normal CSS file when adding new styles.
- If you’re previewing a local website, you can keep making CSS changes until you get closer to the look and feel required for your UI. After that, you can copy the CSS changes you made to your local code.
How to modify CSS from third-party libraries or frameworks
You can also make changes to HTML elements if you use third-party libraries or frameworks like Bootstrap.
- Using This siteright-click on any of the Bootstrap buttons on the page.
- You will see two classes applied to the button, “btn” and “btn-primary”. Bootstrap already has its own style applied to these two classes. The colors used as background and border colors are #007bff. Change this to something else, like Violet.
- If you are previewing a local website, you can then add your new changes to your local code. Depending on the order of your CSS, you may need to use a more specific CSS selector. For example, prefix the selector with “.btn”. This will replace the original Bootstrap style.
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. This is equivalent to adding an inline style to the HTML element, instead of targeting it with a selector.
- Right click on an HTML element. Add any style to the element.style section, such as:
- You will see that the HTML element code has also changed. The code in the HTML element now has the new line:
How Child HTML Elements Inherit Style
If you have two different style values applied to a parent element and a child element, the value of the child element will prevail.
- Using This siteright-click anywhere on the outer edges of the website.
- In the HTML section of the Inspect Element window, focus on two particular HTML elements. There is a parent div element with a “content” class applied to it. This HTML element has an h4 child element, to which a “text-grey” class is applied.
- Select the child HTML h4 element and turn off the color style in the “text-grey” class.
- Select the parent HTML element with the “content” class. Add the following CSS style to the class:
All text in the parent div will turn red. This change will also affect the child elements, which means that the h4 will also have a red color.
- Select the h4 child HTML element and add a new style to the “text-grey” class:
This will override the style of all parent classes. The HTML h4 element will change from red to green.
- You will also see a strikethrough if you display the style of the “content” class. This confirms that the h4 child element overrides the parent’s color.
The benefits of debugging your CSS in the browser
Debugging CSS in your browser can save you a lot of time and speed up your coding workflow. This is especially true if you need to see how your new CSS changes affect your website’s UI in real time.
You can use this technique instead of modifying your local code and reloading your application. This will take the guesswork out of which CSS values would work, because now you can see your UI changes as you make them.
You can make changes in the Inspect Element window until you get closer to the design you want. Once you’ve done that, you can then copy the code from the Inspect Element window into your local code. You can always rerun your app to test that your new CSS changes are still working.
This tutorial covered the basics of debugging a website’s CSS using the Inspect Element window, including where to find the CSS in the Styles tab.
He also explained how to make changes to the CSS and view visual UI changes in real time. I hope you also understand how to make changes when CSS uses a third-party library and how style inheritance works.
There are many other cool things you can do with the Inspect Element window.
7 fun things you can do with Inspect Element
About the Author