: CSS style viewer/tester Is there a site out there that has a bunch of typical HTML for seeing what the CSS looks like once applied? I mean, something full of table, a, div, span, p, whatever.

@Murray432

Not sure if that is what you asked for, but the CSS Zen Garden has such an HTML page with loads of CSS designs. You could write your own CSS for this site, the examples are very inspiring.

Vote Up Vote Down

@Holmes151

You go there, paste in your css and see the results.


Here you go: www.oswt.co.uk/developments/style_sheet_viewer/
Exactly what's required in the question!

Vote Up Vote Down

@Nickens628

Wow, someone just posted this on SO.

It IS just what the doctor ordered: jsfiddle.net/
You can write html, css and javascript and run it straight there!! Plus they already have references to Jquery and other stuff!

I think Internet Rule 33 is if you want/imagine it, its out there! ;)

Vote Up Vote Down

@BetL925

I just stumbled across colorschemedesigner.com/.
It's great for choosing colors and will show you example pages to see what the color scheme would look like applied to a typical page.

Update: the website is now paletton.com

Vote Up Vote Down

@Speyer207

Not exactly what you asked for, but I love the live watch mode of less.js.

Generally I just mock up any elements/combinations in whatever flavour of HTML or XHTML is required manually, but you can create your own master document of elements. If you plug in a second monitor (or two, three, etc) to open up all the browsers on (or use a second computer), any changes you save are applied live to all of them at once.

LessCSS syntax can be used alongside ordinary CSS but is faster to work with and easy to pick up (the results can be converted into normal CSS afterwards).

Tools such as Aviary allow you to easily take screen shots (including the automation of scrolling down and stitching), which can be quickly annotated (on-line with shareable links) or saved and compared in another tool (such as Photoshop, GIMP, Paint.NET, etc) by overlaying them as layers and altering the transparency of the one on top.

Edit:

If you want to automate the screen shot process (on file save) so that:


when a problem occurs you already have everything to hand
an image can be added to version control (which too can be automated on file save)
you can concentrate on the CSS instead periphery activities


then you can use something like a file watcher (please excuse the Python orientation, there are plenty of other solutions) with a screen grabber. Post processing can also be automated and if you use consistent window positions (a program/desktop environment can aid this) the "chrome" around browsers can be chopped off as part of the script.

Vote Up Vote Down

@Nimeshi995

I build all my pages in html/css then use firebug or chrome webmaster tools to add/change/experiment with styles. It's quick, simple, and temporary, which is great for experimentation. Plus, you can work with your own code on your own servers, which is another bonus.

Buzzkill: the UI Developer part of me cautions you that it's better to concept in a true design tool and then code to mimic due to differences in browsers....just sayin'...

Side note--I'm a huge fan of Jquery's UI Themeroller. Such a tool does exist for Themeroller to change styles on the side. It's possible to entirely theme a site via Themeroller's CSS, then simply toggle between different themes. If you've not ever tried it, it can really speed up deployment, especially if you're looking for that "glossy" look that's so popular right now.

Vote Up Vote Down

@Pope3001725

w3schools lets you play around with HTML and CSS rules. Just find the CSS/HTML you want to play with and look for where it says, "Try it for yourself". Here's their border CSS page and here's their playground.

Vote Up Vote Down

@Yeniel560

I don't know of any, but this is simple to set up yourself. Simply create a basic HTML document with all the elements you describe. (You can generate text if necessary from Lipsum.com.) Then link to a CSS file in the document head to see your styles attached. Next time you want to test, change it to point to another CSS file.

Vote Up Vote Down