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
p, whatever. You go there, paste in your CSS and see the results.
Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.Sign up to join this community
Wow, someone just posted this on SO.
It IS just what the doctor ordered: http://jsfiddle.net/
I think Internet Rule 33 is if you want/imagine it, its out there! ;)
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.
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.
If you want to automate the screen shot process (on file save) so that:
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.
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.
You go there, paste in your css and see the results.
Exactly what's required in the question!
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.