CSS Fundamentals
Debug CSS with the Chrome Devtools
CSS can be hard to understand. It can be frustrating when you expect the element to be styled one way and it just doesn’t. Luckily our browsers like Chrome, come with devtools we can use to see which styles are overriding and which have issues.
Instructor: [00:00] With our LI styled red, we can see some of the tools that Chrome gives us by right-clicking on the element that we want to inspect and click on the inspect option. When we use that inspect option, Chrome will take us to where the selected HTML lives inside of this tree.
[00:18] Within the styles tab, we can clearly see our LI styled red. This box is editable, which means we can remove this style by clicking on the check and add other properties such as font size, which will automatically apply to our HTML.
[00:38] The hierarchy order here is important. We see that this LI receives other styles from Chrome, such as text align. It also gets these bullet point-type styles also from Chrome, but it's being inherited from the UL.
[00:53] When we refresh our custom styles, our font size will go away. What's also nice is Chrome will tell us where it got this style from. We can see that it came from our style.css and that's where it says it comes from. If we click on our style.css here, it takes us to that file.
[01:10] We can easily add a class to our A tag here by clicking on this dot CLS, which will open up an input box. We can type in the name of the class that we want to add to our A tag, press the plus sign here, and it will give us a custom block where we can type in styles onto our newly created class.
[01:29] We can see if our A tag has any hover state by clicking on the HOV here and clicking on the hover. We can also activate the active, focus, and visited pseudo class as well. These tabs here are showing us where our A tag lives inside the HTML tree. See our HTML, then we have a couple divs, our UL, our LI, and then our A tag.
[01:52] Finally, this right box here is showing us two things. The box model of the selected element and all of the final state styles of our element. This box model is telling us this element does not have any margins, borders, paddings around the element, just the text.
[02:11] We can manually add spacing by clicking on any of these dashes here and typing. If we click on padding and typed in 10, our element will receive a padding top of 10 pixels.
[02:22] As mentioned, if you ever find yourself lost in a sea of CSS styles, this will show the current applied state to the element. This includes our specific coloring of red and all of the default styles our browser is applying to it.