A Handy CSS Snippet/Hack! Debug your CSS

CSS is hard...

If you are struggling to understand why and how your layouts are working, this is one of my favorite little snippets to add to the base CSS file:

html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}

What does this achieve?

It shows an outline and the background color to help show the layering of elements.

Here's an example:

An example of showing this snippet applied to the articles page on Codú

Bookmark it for later. 🔖

Quick TipTipsCSSDebugging
Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.