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!

Tags: browser, debugging, inspector, Learn CSS, learnable, Testing
Russ Weakley is a world-renowned author, speaker and CSS expert, with a detailed knowledge of web design and development. Russ chairs the Web Standards Group (WSG) and produced a series of widely acclaimed Learnable tutorials on CSS. He is currently touring a series of Responsive Web Design workshops around Australia.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.