I am going to redesign of a web site which has about 5 different css files declared in each page.
HTML code is also not very clean and I wonder if any of you can suggest some solutions to analyze for me.
First of all, I need to understand the hierarchy of the div's in the HTML code. Is there any tool available to draw simple diagrams to show the parenthood relations of the divs?
Also I will appreciate if you can suggest some other tools or techniques to easily understand the CSS jam here. For example a simple tool to report what attributes are set (by which css file) for each individual div and class.
Firefox + Firebug is what you're after.
You can see the document HTML structure and select any item on the page, or within the structure view and see the CSS applied to it (and which CSS file it comes from).
Screen shot of the Firebug inspector:
Google Chrome, Safari, Firefox and Opera all have excellent DOM inspectors - Chrome's and Safari's are built in, there are a range of extensions for Firefox (Firebug is most popular) and Opera's Dragonfly downloads on demand. Personally I find Dragonfly the most useful.
If you are looking for an application which searches for unused styles on a site, Topstyle (which I no longer use) had that functionality.
you might also like the firefox plugin 'View Source Chart':
which you can get from here: http://jennifermadden.com/scripts/ViewRenderedSource.html
If you're on a Mac, Xyle scope is an excellent tool for "disassembling" and "style-hunting" a layout.
Probably the best standalone CSS application on the Mac is the award-winning CSSEdit by MacRabbit. That said, it's not free, and as Richard stated above, there are many DOM and Style Inspectors available in-browser and for free.
Your best bet is try try several out and find one that fits your workflow!
The Firebug extension for Firefox shows the hierarchy in a tree like structure and gives you info about applied styles of any highlighted element (through the Inspect function). It shows you from which stylesheet and row the rule comes frome, and all inheritance and cascading effects.
It does not support exporting reports and stuff though.
The Web Developer Toolbar has some useful analyzing functions as well, like outlining all the headlines of the document, showing depth (topographic information) and stack levels. You can also highlight/outline custom elements on the page. Using the "Persist Features" setting you save the current analytic settings when navigating around the site.