Preview Your Style Sheet


Have you ever wondered what your style sheets look like? Are you creating duplicate styles because you have forgotten what you did a month ago?

Since we are in the industry for providing useful developer tools, we’ve just launched a FREE CSS preview tool. Not only can you preview each style you’ve created but you can also cut and paste the HTML output so you can use it for future reference.

Here is what has happened to me numerous times in my humble career as a designer. I spend a lot of time creating this perfect style sheet and then six months later my client asks me to revisit the project and I cannot remember what I did in the first place. Of course, if I could only see it, I would immediately recognize it because after all, isn’t “seeing” what styles are all about?

After some initial searching on Google, I quickly realized that there wasn’t anything available for a down and dirty, oh and did I mention FREE CSS preview so I decided to hunker down and build one myself.

For this first beta release, I created tool that allows users to drop in their CSS and get an instant preview of what each style looks like. Of course it’s not every day that you see all of your styles in one, fairly long, scrollable page so I eliminate background images and colors but maintain body or universal (*) styles for all other CSS declairations. I also eliminate any fixed or absolute positioning declarations, so as not to display styles stacked up on top of each other.

Aside from inserting your CSS, you can also provide your web URL – this allows the creation of absolute references for each of your background images. In the result screen you can see the calculated image path based on the first background image referenced in your style sheet. If the path is incorrect, you can adjust your URL accordingly.

Now that so many WYSIWIG editors are smart enough to know what an H1 tag is, you may have clients asking for a CSS “cheat sheet” so that they can use the styles that are available to them. With that in mind, I added an “HTML Output” tab to the results screen. This way, you can easily cut and paste the HTML code which was created by the preview and use it for future reference.

This project is in beta so please report bugs here. If you have comments or suggestions, don’t hesitate to share below. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies