The Inspect Element tool is great when it comes to debugging your web pages in real time. You can 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. It will also cover how you can use this to preview changes you make to your CSS in real time.
Opening Inspect Element in Google Chrome
You can visit any website and open the Inspect Element window to see what its HTML or CSS code looks like. This tutorial will use a sample website to demonstrate.
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 on Inspect.
The Inspect Element window will open to the HTML code for the part of the website where you right-clicked. 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 view both the HTML and CSS code. You can see the HTML code on the left of the Inspect Element window. You can find the CSS code to the right, under the Styles tab.
Let's say you had an HTML element with a class called "card-padding", with right and left padding applied to it:
.card-padding {
padding-right: 0vh;
padding-left: 0vh;
}
If you previewed this website in the browser, you would be able to select the div element with the "card-padding" class. Any styling applied to the "card-padding" class would show on the right, under the Styles tab.
When you hover over an element in the HTML code view, that part of the web page will highlight in the web browser. The HTML element type, along with any class names will also display in a dialog box next to the element.
In this case, you will see the div container with the class names "row", "card-padding" and "pb-5" highlighted on the page.
How to Make Changes to the CSS in Real Time
You can change the CSS directly from the Styles tab:
- Using this website, right-click on the first heading.
-
On that particular h4 heading, you will see a class applied to it called "text-grey" with a color of #8a8a8a.
-
Change the color to something else instead, such as orange. You only want to change the value itself, and not the name of the property, "color".
-
You will see the heading change from dark gray to orange.
-
If you want to disable a particular CSS style, un-tick the box to the left of the styling.
-
You can also add more 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 you would in a regular CSS file when adding new styles.
- If you are previewing a local website, you can continue to make CSS changes until you get closer to the required look and feel for your UI. After that, you can copy the CSS changes you made back into your local code.
How to Modify CSS From 3rd-Party Libraries or Frameworks
You can also make changes to HTML elements if you are using 3rd party libraries or frameworks such as Bootstrap.
-
Using this website, right-click on one 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 styling applied to both of these classes. The colors that are being used as the background and border colors are #007bff. Change this to something else, such as Violet.
-
If you are previewing a local website, you can then add your new changes back into 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 override the original Bootstrap styling.
.btn.btn-primary {
background-color: violet;
border-color: violet;
}
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 the equivalent of adding inline styling to the HTML element, instead of targeting it using a selector.
-
Right-click on an HTML element. Add any styling to the element.style section, such as:
color: whitesmoke;
-
You will see that the code for the HTML element has also changed. The code within the HTML element now has the new line:
style="color: whitesmoke;"
How Child HTML Elements Inherit Styling
If you have two different styling values applied to a parent element and a child element, the value in the child element will take precedence.
- Using this website, right-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, with a "text-grey" class applied to it.
-
Select the child h4 HTML element, and disable the color styling in the "text-grey" class.
-
Select the parent HTML Element with the "content" class. Add the following CSS style to the class:
color: red;
-
Select the child h4 HTML element, and add a new style to the "text-grey" class:
color: green;
-
You will also see a strike-through if you view the styling for the "content" class. This confirms that the h4 child element is overriding the parent's color.
The Benefits of Debugging Your CSS in the Browser
Debugging CSS in your browser can save a lot of time and speed up your coding workflow. This is especially true if you need to see how your new CSS changes impact the UI on your website in real time.
You can use this technique instead of making changes to your local code and reloading your app. This will save you from guessing what CSS values would work, as you can now view your UI changes as you make them.
You can make changes to the Inspect Element window until you get close to your desired design. Once you have, you can then copy the code from the Inspect Element window, back into your local code. You can still re-run your app to test that your new CSS changes still work.
Other Useful Inspect Element Tools
This tutorial covered the basics of how to debug the CSS of a website using the Inspect Element window, including where to find the CSS in the Styles tab.
It also covered how to make changes to the CSS and view the visual changes to the UI in real time. Hopefully, you also understand how to make changes when the CSS uses a third-party library, and how styling inheritance works.
There are many other interesting things you can do with the Inspect Element window.