Inspect Element: Troubleshooting CSS in the Browser

Russ Weakley
Tweet

Anyone who uses CSS will eventually have to deal with browser layout issues at some point in time. But how do you solve these layout issues? One way to solve many layout issues is to use in-built browser functionality called “Inspect Element”. This lets you check out individual elements and the relevant CSS associated with these elements.

This video will introduce you to the Inspect Element functionality as well as explaining how it can be used to help troubleshoot CSS issues.

If you would like to learn more about CSS troubleshooting, check out my new course called CSS Troubleshooting in 6 Easy Steps on Learnable. The course is designed for beginners and those who have struggled with CSS layout issues in the past. Hope to see you there!

Free Chapter! HTML5 & CSS3 for the Real World

Get a free chapter of SitePoint's new book, the second edition of our popular HTML5 & CSS3 for the Real World and receive updates on our latest offers.

  • Craig Buckler

    Great to see you back on SitePoint, Russ!

    • OphelieLechat

      Russ is working on a whole bunch of courses for Learnable. I’m glad that means we’ll be publishing his videos on SitePoint, too!

  • grovberg

    So i’m pretty familiar with the web inspector but I watched this anyway hoping you’d address a long-standing question I’ve had about it. In the styles panels you can see which styles are being overridden with a strikethrough, but some are red and some are black. What’s the difference between those two? And is there any way to use the inspector to find which selector is overriding?

  • jimm

    Great tut Russ. However I wish you’d spent a lil more time explaining how to ‘overide exsiting files’. I am able to make changes on the element panel but have no idea what file they exist in or how to actually overide them. Any suggestions. Thanks again.