By Matthew Magain

Live Demos: The SitePoint CSS Reference Goes Interactive

By Matthew Magain

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!

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

    Hat off to James. Great job!

  • Agreed — Looks awesome James, well done!

  • Ronnie

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

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

  • 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!

  • 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


  • Outstanding work, Cake.

  • 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?

  • 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

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

Get the latest in Front-end, once a week, for free.