1. Free tool to optimize, clean and compress CSS stylesheets
CSS (cascading style sheet) deals with the look and formatting of your blog by specifying the style of a range of HTML elements, which are selected by ID, Class, type or relationship. In wordpress blog themes the main stylesheet file is named “style.css” and typically has a filesize of anywhere between 20 and 60 kilobytes.
Using the tool at cleancss.com (which is based on the tidycss script), does not only optimize and reduce the filesize of your stylesheet with an average 25%, it also allows you to compress the code layout. When you set the compression rate to High (moderate readability, smaller size), all your rules will be formatted on one line each. Personally I strongly prefer this code layout over the standard layout, as I find it easier to ‘scan’ my code.
Furthermore, cleancss optimizes selectors and their properties, merges shorthand properties, compresses colors and font-weight, removes unnecessary backslashes, converts the !important hack and removes the last dot-comma ; from each line of code.
2. Validate HTML and CSS markup tool
The CSS optimizer tool is not a code validator. To validate your HTML and CSS code, the nr.1 resource is at the site of W3C, the World Wide Web Consortium, who are the main international standards organization. There you can find both the HTML and XHTML Markup Validator, and the CSS Validation Service.
3. Pixie color picker
Pixie is a nifty tool specifically made for webmasters and designers. Simply point your cursor to any color on your screen, and pixie will tell you the hex, RGB, HTML, CMYK and HSV values. You can also use the keyboard shortcuts CTRL+ALT+C to copy the HTML color value directly, CTRL+ALT+X to open color mixer and CTRL+ALT+Z to open the magnifier. The portable application file of this little tool is only 11Kb.
4. Live Editing, Debugging, Tweaking and Monitoring of HTML elements.
Firebug is an open source web development tool that integrates with the Firefox browser and puts a wealth of utilities at your fingertips. It allows you to edit, debug, tweak and monitor HTML, CSS and JavaScript, while you’re browsing web pages. Firebug also comes with a DOM (Document Object Model) console to help you see how HTML elements relates to each other.
5. jQuery User Interface
jQuery UI is a library of interface components that provides abstractions for interaction, animation and other advanced effects. These are built on top of the jQuery JavaScript library, and the themeable widgets make it easy for web developers to build interactive web applications.
