For each website that I make a new CSS stylesheet for, I typically make a preview page that looks something like this:
<h2>This is an h2</h2> <a href="#" class="external">This is an a.external</a>
Which creates output like this:
This is an h2
This is an a.external<p>This make for a handy reference guide to all your styles, but can be a bit cumbersome to setup, especially if you have a big stylesheet.</p><p>Today I discovered an awesome feature of Textmate that automates this whole process. When editing your stylesheet in Textmate, use the Show Web Preview command ( ctrl + option + ⌘ + p ) to generate a list of all your different styles.</p><p>
</p><p>I discovered this via this post on tumblr.</p>