Placed in: Home arrow Programming arrow CSS arrow CSS trick: Debug your HTML and CSS comprar viagra en españa
comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
CSS trick: Debug your HTML and CSS

Today, I'll be showing you a neat little CSS trick to Debug your HTML and CSS. Take note that this will not be actual debugging, but it can help you find the element depth on a web page. Also, when you didn't properly close a tag, this piece of code will expose it for you.

Debug your HTML and CSS

Simply check out the demo to view what we're going to create! At first, the demo looks like a regular web page. But when you start hovering the elements, you'll be able to see the HTML structure (in depth) of the HTML page.

Demo Debug your HTML and CSS   Download Debug your HTML and CSS

There are just a couple of lines of CSS to get this effect! Check out how (or view the source) you can create this yourself.

The Debug CSS

This little piece of code will give you the debugging effect. The * in CSS means any element; a * * means any child element etcetera. With the :hover the lines will only will displayed when hovering the page. Remove the keyword to see the full structure.

 
* *:hover { border:2px solid #89A81E }                   /* Solid Green */
* * *:hover { border:2px solid #F34607 }                 /* Solid Orange */
* * * *:hover { border:2px solid #5984C3 }               /* Solid Blue */
* * * * *:hover { border:2px solid #CD1821 }             /* Solid Red */
* * * * * *:hover { border:2px dotted #89A81E }          /* Dotted Green */
* * * * * * *:hover { border:2px dotted #F34607 }        /* Dotted Orange */
* * * * * * * *:hover { border:2px dotted #5984C3 }      /* Dotted Blue */
* * * * * * * * *:hover { border:2px dotted #CD1821 }    /* Dotted Red */

That's all there is! Simply add this to the top of your CSS file and remember the order. When in production, you can simply remove it (or place it in comments).

We don't need to check one *, since the first element it'll find is the <body> tag. Unless you're afraid of doing that wrong, you might want to add it too.

Conclusion and Download

This trick might get in handy just in case you didn't fully check something.

Demo Debug your HTML and CSS   Download Debug your HTML and CSS

The demo page was created with text from HTML-Ipsum. What do you think of this code?


Tags:  debug css trick html code snippet

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Digg!Reddit!Del.icio.us!Facebook!StumbleUpon!
 
< Prev   Next >
[ Back ]