A round up of some handy tools for working with Cascading StyleSheets today.
- Firebug is an essential for testing and tweaking CSS designs, the ability to manipulate the rendered DOM, means that you can even test tweaks to script-generated markup.
- Another FireFox add-on, the Web Developer Toolbar extension does many of the things that Firebug does but adds a few other little treats to the mix such as the ability to quickly deactivate stylesheets or background images for instance.
- Vertical rhythm calculator This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings, depending on the line height you’ve defined. available in the browser or as a downloadable Air application.
- PSD2CSS Online An online service that generates Web pages from Photoshop designs. This is an impressive technical achievement with a growing list of features. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
- CSS Redundancy Checker You can use this tool to find CSS selectors that aren’t used by any of your HTML files, handy for trimmimg bloated files down to size.
- CSS Text Wrapper make HTML text wrap in shapes other than just a rectangle. Great for creating stylish, magazine-type layouts.
- CSS Sprite Generator This tool will convert a number of images into a single image and generate the CSS to create CSS sprites – elemnets which display only a part of a larger image. The benefit is that a single image download can reduce page load times.
- MinifyMe This AIR application will compile multiple CSS and JavaScript files into one for optimising your site delivery.
- CSS SuperScrub This tool aims to reduce the size and complexity of your CSS by stripping unneeded content, redundant items and intelligently grouping the remaining element names.
- typeface.js This interesting development takes a different approach to rendering custom fonts in web pages. Rather than replacing the text with an image or Flash object, it uses the vector rendering capabilities of the browser to “draw” a specially converted version of the font.
- Kotatsu A simple HTML table generator. The tool lets you attach classes to cells which is very useful for styling up tabular data.
- Juicy Studio: CSS Analyser Juicy Studio’s CSS Analyser combines the W3C validation service with additional checks of color contrast (helpful for vision-impairment accessibility issues).
- FormatCSS allows you to paste your valid CSS code, correcting and standardizing your source code.
Hat tip to Smashing Magazine for helping me find most of these.

Tweet This
Digg This







