11

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. You go there, paste in your CSS and see the results.

Improve this question
1
  • Scrape any page you want and edit the CSS with Chrome Developer Tools, FireBug, or your other favourite dev tool.
    – msanford
    Commented Dec 21, 2012 at 5:16

8 Answers 8

Reset to default
4

Wow, someone just posted this on SO.

It IS just what the doctor ordered: http://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! ;)

Improve this answer
2
  • 1
    I've seen jsFiddle, but it not what I'm looking for here. I'm looking for something that has a mock site, full of typical html code, that I can use to see what my css would look like. At colorschemedesigner.com you can just click "Light page example" and it shows you a Lipsum page.
    – Homer
    Commented Oct 28, 2010 at 14:35
  • I see. lol I guess it was what I was looking for when I stumbled on your question, so when I found it.. i scrambled to look for your question in my history and posted it here. Hope it helps someone....
    – gideon
    Commented Oct 28, 2010 at 14:39
4

I just stumbled across http://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 http://paletton.com

Improve this answer
1
  • 2
    That doesn't seem to be the answer to your question.
    – jeremy
    Commented Dec 20, 2012 at 13:07
2

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.

Improve this answer
1

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.

Improve this answer
1

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.

Improve this answer
1

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.

Improve this answer
0

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

Here you go: http://www.oswt.co.uk/developments/style_sheet_viewer/

Exactly what's required in the question!

Improve this answer
1
  • Pretty cool, but not quite what I had in mind. This site generates html to match the css. That's nice because it will show you all your styles in action, but it doesn't show what it would look like in a 'mock' site. Something like you see at colorschemedesigner.com when you click the "Light page example" link
    – Homer
    Commented Dec 20, 2012 at 16:54
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.