Inspect CSS

- [Voiceover] Any time I have a CSS issue, I go straight to the DevTools and inspect the HTML to see the corresponding CSS, right away. Let's take a look at this H1. By inspecting the element, I can see the corresponding CSS right away, as well as the CSS file and the line that the CSS declaration is contained in. When debugging the CSS, unchecking the property temporarily removes the styles. For example, if I uncheck this margin value, it'll remove the styles, setting it back to the default H1 styles.

Sometimes, nothing changes when you uncheck a property. For example, when I uncheck display block, nothing changes, and this isn't uncommon. Often, when trying to solve CSS issues, we add more CSS and forget to remove the properties that didn't work or do anything. If nothing changes, consider removing it. In this example, unchecking display block didn't show any change, because this is already the default style for headings. If you scroll down, here you'll see some styles listed under user agent style sheet.

And that just means, that is the default styles of the browser. If properties are crossed out before you uncheck it, like this color value of H1, this means it's being overwritten by another CSS declaration. Look upwards, to find the CSS. It's usually contained within the same selector or a more specific selector, such as this example. It's in the header H1, which is more specific than H1. Unchecking the property will confirm whether it's overriding the style.

It's going to change from white to this yellowish color. If you see an element style block, like in the header, these are CSS styles injected by JavaScript as inline CSS styles, as you can see over here in the HTML. Following CSS specificity rules, inline styles will override CSS written in an external file. Let's go back to this H1 block. If you see styles crossed out with this yellow warning sign, that means the property or value itself is not valid.

Or it could just be a typo. In this case, it's just a typo. Being able to edit styles in the CSS panel is also useful for designing in the browser. You can see how the elements will look, right away, instead of switching back and forth between the editor and the browser. And sometimes, a couple of pixels can make all the difference. Let's change the font size of this H1. Select the value, and use your up and down arrow keys to change the value by one. You can also hold down the shift key, and that will change the values by 10.

And this works for other measurement units as well. I'm going to change this to a percent, using my up and down arrow keys, and this will help you design right in the browser. So you can see your changes right away. You can also change colors by clicking in the color box, to show additional options. You can choose from hex values, RGBA, and all of the other color options. Or you can even use this color slider. Select a color, and it will update in the CSS panel.

If you wanted to test these different element states, select this HOV option. And then, inspect your element, and check which state you want to test. Beside that is an option for adding a class to the selected item. I'm going to add an additional class to my main tag. As you can see, it's now been added to the HTML on the left. To add new CSS declarations for this new class, select the plus symbol.

It will add a selector for you, but most of the time, the selectors are overqualified, meaning that they're more specific than you need. You can edit the selection name by clicking on it, and stick to best practices by using selectors that are only as specific as you need. Another useful feature is the computed box model layout. Scroll to the bottom, or you can just press the computed tab. When you hover over the element in the HTML panel, or in the computed box layout, notice how the different colors match up.

When it's green, it's showing that this space around the main element is coming from the padding, there's no border values, and there's 10 pixels of margin. This will just help you determine where the spacing is coming from, and which property is being applied to it. Remember, any changes made in the DevTools aren't actually being saved in your working files. So, keep in mind, this is best for smaller tests and edits.