CSS Playground

The CSS Playground is an area where you can play around with CSS styles and properties using a site that's laid-out a bit like a typical site. I encourage you to use wide variety of CSS styles to see what you can come up with.

Modifying the site's appearance on your own computer is easy. I've only got instructions for doing playing with the site using Firefox, but if you come up with your own way, please let me know. You'll just need to do a few things:

  1. If you don't already have it, download Firefox from the Mozilla foundation.
  2. Download and install the Web Developer Toolbar extension for Firefox.
  3. Restart Firefox.
  4. Navigate to this site ( http://dmit.asu.edu/learning/workshops/sum05_dw/ )
  5. You'll notice you now have an extra toolbar in Firefox. (It has buttons like Disable, CSS, Forms, etc.). From this menu, choose CSS » Edit CSS (or press Ctrl+Shift+E).
  6. A sidebar should appear in Firefox containing the CSS for the site. This allows you to edit the locally cached CSS file (you won't be editing the actual CSS file on the server).
  7. Start making changes to the CSS file and you should see the changes appear in the page. (If the changes don't appear automatically, you can press the green "play" button at the top of the sidebar.

If you need to revert back to the default CSS, just press the blue "Reset All" button at the top of the sidebar.