« | Home | Categories | »

A Handy CSS Debugging Snippet

Posted on November 20th, 2009 at 18:52 by John Sinteur in category: News -- Write a comment

[Quote:]

I use the following bit of CSS to help visualize the structure of an XHTML (or HTML) document by putting a colored outline around the border of every element. At each level in the hierarchy the color changes so you can see when “depth” changes.

  * { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }

I usually keep this block of rules at the top of a stylesheet, commented out with /*…*/, which I remove when I want to see the structure.

previous post: As pensions dried up, four firms paid top execs $49.5M

next post: Smiley-Ping