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.

Right clicking and selecting 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.

Inpecting Element on Website

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.

HTML Code with CSS 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.

Close up of HTML Element with Card-Padding Class showing in 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.

Close Up of Highlight Element on the webpage

How to Make Changes to the CSS in Real Time

You can change the CSS directly from the Styles tab:

  1. Using this website, right-click on the first heading.
  2. On that particular h4 heading, you will see a class applied to it called "text-grey" with a color of #8a8a8a.
    Viewing a Class in the Styles tab
  3. 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".
    Changing styling for classes under the Styles tab
  4. You will see the heading change from dark gray to orange.
    h4 HTML Element with orange color
  5. If you want to disable a particular CSS style, un-tick the box to the left of the styling.
    Un-tick the CSS style to disable it
  6. 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.
    Adding new styles to the class in the Styles tab
  7. 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.

  1. Using this website, right-click on one of the Bootstrap buttons on the page.
    Bootstrap Button highlighted on a webpage
  2. 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.
    Changing CSS of Bootstrap Button in the Styles tab
  3. 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.

  1. Right-click on an HTML element. Add any styling to the element.style section, such as:
            color: whitesmoke;
        
  2. 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;"
        
    Changing element.style in the Styles tab

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.

  1. Using this website, right-click anywhere on the outer edges of the website.
  2. 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.
    HTML Code of Inspect Element window demonstrating parent/children HTML elements
  3. Select the child h4 HTML element, and disable the color styling in the "text-grey" class.
    Un-tick the CSS style to disable it
  4. Select the parent HTML Element with the "content" class. Add the following CSS style to the class:
            color: red;
        
    HTML Element CSS (color) being changed to red via the Styles tab
    All text within the parent div will turn red. This change will also cascade to the child elements, meaning the h4 will also have a red color.
  5. Select the child h4 HTML element, and add a new style to the "text-grey" class:
            color: green;
        
    Changing the styling of a class in the Styles tab
    This will override the styling of any parent classes. The h4 HTML element will turn from red to green.
  6. 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.
    Strikethrough over a style in a CSS class

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.