View css styles in a demo page

Question

Is there an app out there that will take a .css file and output a demo page of it?

Like take all the span/div/a elements and display what they would look like in an html page?

Answer 1

TopStyle does that with an internal view. It is an excellent tool.

http://www.topstyle4.com/

Answer 2

... without an associated (X)HTML file?

If what you need to do involves CSS with no knowledge of its associated (X)HTML document's structure or classes or ids... then isn't it simple enough to just write up a small page and preview it in a browser?

Not to offend, but personally I think previewing CSS without an (X)HTML document is a little strange. A few reasons:

If you start with CSS you may try to make your HTML cater to your CSS when it should be the other way around. Starting with the CSS and then writing your page feels like a good way to end up with messy HTML, and if I have to choose between (messy HTML and clean CSS) or (clean HTML and messy CSS) I personally would choose the clean HTML every time.

You also mention targeting <div> and <span>. This is a personal opinion, but I feel pretty strongly that people shouldn't target <div> and <span> without class or id attributes. Since <div> and <span> don't have semantic meaning, I just can't imagine why you'd need to style them unless you were either CSS resetting or fullfilling a requirement, and is your customer more likely to ask for "all employee names should be underlined" or "spans should be underlined"? ... but once you're targeting class and id, you need your HTML document to go with your CSS.

Answer 3

Try rendur: http://rendur.com/

I agree with Richard that you shouldn't expect much if you're styling raw div and span elements. :)

Answer 4

While this will not autogenerate anything from your css, this is an excellent XHTML test page that includes all of the standard tags, page, and form elements you are likely to have used. Apply your style sheet to this page and you will be 80% of the way there. Then just add areas for your custom classes, etc. http://snipplr.com/view/8121/html-test-page-for-css-style-guide