Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Debug CSS with the Chrome Devtools

    Tyler ClarkTyler Clark
    cssCSS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss