CSS Reference Live DemosThe popular SitePoint CSS Reference today added an exciting feature to its already impressive list — live demos.

This is a feature that was among the most commonly requested in our recent reader survey. It’s common knowledge that many beginner web developers learn best by doing. Now the most comprehensive reference for CSS on the Web comes with a sandbox in which you can experiment and learn in real-time.

The talented and wonderfully controversial James Edwards is the brains behind not only the code, but some of the quirky content contained within the example markup (if you understand all of the obscure song lyrics, book quotes or sci-fi movie one-liners then you’re doing better than I am!).

We’ve just launched this today, so there may be a couple of kinks that still need ironing out. Feel free to let us know in the comments for this post (or if it relates to a specific page, on the page of the reference site itself).

Try it yourself!

Matthew Magain is a UX designer with over 15 years of experience creating exceptional digital experiences for companies such as IBM, Australia Post, and sitepoint.com. He is the co-founder of UX Mastery, and recently co-authored Everyday UX, an inspiring collection of interviews with some of the best UX Designers in the world.

  • http://autisticcuckoo.net/ AutisticCuckoo

    Holy cow, Batman! That’s a nice feature that surely will come in handy, not only for beginners.

    Hat off to James. Great job!

  • http://www.sitepoint.com ShayneTilley

    Agreed — Looks awesome James, well done!

  • Ronnie

    SitePoint CSS Reference is already a masterpiece. This feature adds even more value.

  • http://www.xraysierra.com XraySierra

    That is an amazing new feature. That is something that elevates it above all the rest. Good work people!

  • http://hardy.hemmingway.info TheOriginalH

    I agree it’s a great feature. It isn’t revolutionary though – w3schools (who’s reference is rapidly becoming inferior) have had this feature for years.

    If it were integrated with more examples it would be even better.

  • Jdawg2k

    Agreed. A simple concept but have never anyone do it. Way to stay ahead of the game!

  • http://www.xixblog.com banago

    Very good job SitePoint team. Thanks very much!

  • colorbycolor

    Great job! Love it-and for anyone needing more examples, you can add to and change the style sheet to include anything-links, pictures, etc. They just have the h1 and h2 there to get you started.

  • tjk


  • http://www.sitepoint.com Simon Mackie

    Outstanding work, Cake.

  • http://www.authelo.com z0s0

    Suggestion: The reference pages need to load faster for first time visitors (i.e. when I click through from Google). 4 CSS + 8 JS resources are the culprit. w3schools has just 3 total.

  • cob

    Great job everyone. Great new functionality.

  • Nacho

    Sorry, I don’t quite get the point of it : |
    What’s the difference of doing css locally?

  • http://www.bdsvc.com sysop157

    The Web Developer extension for Firefox allows you to do this real time on any web page. As soon as you make a change (for example adding color: #ff0000; to the h1 tag) the affected elements change in the screen.

  • Dr-Net

    Very Nice :)

    Many Thanks

  • http://www.yellowshoe.com.au/ markbrown4

    It’s really simple to test advanced features of CSS that I haven’t yet run into.
    Nice addition James

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.