60 Tools To Optimize Your CSS

To optimize your site in every way is important from many aspects. Your site needs to be attractive and load as fast as possible, and CSS rule an essential part of styling and speed. According to Wikipedia, CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

But remembering all those optimizing methods, keywords, values and properties can be everything else than simple, and it does take a lot of time to find out correct information.

Wikipedia; Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language.

But there is help out there and it will not cost you anything extra. Cashrevelations.com found some CSS resources out on Internet that we put together to a nice and practical collection of CSS tools that will help you to optimize and build your CSS code.

Cashrevelations.com has the honor to present for you: 60+ Free CSS Tools that will make your efforts to build a webpage a lot easier.

Firefox Add-on’s

To use these Add-on’s you need a Firefox browser. You should seriously consider to download one, in case you don’t use it already. It will make your work easier if you plan to continue to build webpages. You can download it for free HERE.

1. CSS validator 3.0.0
Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab.

2. Firebug 1.4.1
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

3. ViewSourceWith 0.4.2
View page source with external applications and you can also open page source as DOM document, open CSS and JS files present on page and more.

4. CodeBurner for Firebug 1.2
CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

5. Firefinder for Firebug 0.91
Firefinder is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression. Type in desired filter and view the results.

6. Font Finder 0.5d
Simply highlight a single element, right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.

7. CodeBurner for Firefox 1.0
CodeBurner for Firefox provides searchable reference information and code examples for HTML and CSS. It’s a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.

8. Dust-Me Selectors 2.2
Dust-Me Selectors is a Firefox extension that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used.

9. CSS Usage 0.0.5
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

Online CSS Tools

There are lots of good and useful web code generators and CSS tools out there on the web – we recommend you to make an own search if you don’t find what you are looking for on this list. Feel free to make a comment with tool tips if you find something useful.

Check your CSS code

10. CSS Validation Service
Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets. The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS).

11. CSS Analyzer
Check the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

12. CSS Check
CSSCheck is a lint to check the syntax, style, and accessibility of Web authors’ Cascading Style Sheets. Validates and checks into browser compatibility issues with your stylesheet.

Clean Up, Optimize and Compress your CSS

13. CSS Redundancy Checker
Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant. Manually enter the URI for each page that you want to test.

14. Code Beautifier
Code Beautifier CSS Formatter and Optimizer – Online CSS parser and Optimizer.

15. Online CSS Optimiser/Optimizer
This tool takes a CSS file, and parses and outputs a leaner version, removing any redundancies and attributes which are not needed.

16. CSS Compressor
The CSS Compressor makes major changes to stylesheets and is still in developement, so it may not work correctly.

17. CSS Drive
Compress your CSS to increase loading speed and save on bandwidth. Choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

18. CSS SuperScrub
Significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

19. Online CSS Optimizer
Tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file.

20. Format CSS
Automatically format your CSS so they are easy to read and edit. Use this tool to reorganize your CSS. Simply submit your cascading style sheet, and receive our suggested reorganization.

Fonts

21. Typetester
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

22. CSS Type Set
CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

23. Font Tester
Font Tester is a free online font comparison tool. It allows you to visually compare fonts side by side with different CSS font styles applied.

24. Typechart
Typechart lets you flip through, preview and compare web typography while retrieving the CSS. Browse typographic styles and download CSS.

25. CSS Typoset Matrix
A matrix table that presents font sizes and margins for various base font sizes — in pixel and em units. CSS Typoset Matrix also generates the source code.

26. Facelift Image Replacement
Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors.

Build Menus

27. CSS Menu Builder
Create a standard compliant xhtml/css menu for your website for free via the online navigation generator. More than a 1000 horizontal, vertical and breadcrumb menus via the CSS Menu Builder.

28. CSS Menu Generator
Provide the average webmaster with tools to create custom, cross browser compatible website menus. The menu generator makes it easy to create custom CSS menus without having to know all the complicated HTML and CSS.

29. Drop-Down Menu Framework
Clean, standards-friendly, free, easy, cross browser framework for CSS drop-down menus. 14 customizable templates for designing drop-down-menus.

30. Visual CSS QuickMenu
A solution for generating fast and feature rich drop down menus. Produces fast pure CSS list based menus capable of functioning in browsers with their JavaScript disabled.

Build CSS

31. Sky CSS
Online CSS Authoring Tool – Sky CSS allows you to create CSS classes almost without using manuscript code.

32. CSS Grid Builder
The CSS Grid Builder from Yahoo! UI Library is a simple web-based interface for quickly creating any number of layouts that rely solely on YUI’s CSS files.

33. YAML Builder
The YAML Builder is a small tool for visual rapid development of CSS layouts, based on the (X)HTML/CSS framework “Yet Another Multicolumn Layout”. The application supports all core features of the framework and helps you to create bulletproof CSS layouts.

34. Grid Designer
An Online tool for designing grids and typography. Using this script should not be difficult – most of the functions are pretty self-explanatory.

35. CSS Layout Generator
This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

36. CSS Generator
A simple CSS generator that dynamically applies styles as you select them. You can then temporarily apply your chosen styles to another web page. Great tool for beginners experimenting with CSS.

37. CSS Mate
An Interactive Online CSS Editor to design your CSS styles. The CSS editor is divided into 5 areas – menu, attributes, selection values, preview and code.

38. Layout Generators
Multi-column layout generators with CSS 2.0 techniques, generates 1,2,3,4,5 column liquid and fixed layouts using %, px or em.

39. Blueprint Grid CSS Generator
This tool will help you generate more flexible versions of Blueprint’s grid CSS and compressed CSS and grid PNG files. Whether you prefer 8 – 24 columns in your design, this generator now enables you that flexibility with Blueprint.

40. Page Maker
CSS Source Ordered Variable Border 1-3 Columned Page Maker. The Page Maker is ready to take your code to make your own style using graphics. You can put 3D effect boxes in the header/footer and sidebars and more.

41. The 1KB CSS Grid
A simple tool that generates lightweight CSS grid. It can be used to streamline page templates for content management.

42. Grid System Generator
This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

43. CSSFly
CSSFly is a tool for easy editing websites direct and in real-time in your browser. This tool is designed for developers. Use it for developing, testing or checking your web-project.

CSS Frameworks

A CSS framework, is a pre-prepared library that makes styling of a webpage (using the CSS language) easier – CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

44. Blueprint
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

45. Yet Another Multicolumn Lay
YAML is an (X)HTML and CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

46. 960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

47. Fluid 960 Grid System
The Fluid 960 Grid System templates (for interactive prototyping, covering main design elements) have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.

48. Logic CSS
The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

49. Elements
Elements is a down to earth CSS framework. Elements is a collection of folders and files that help you work faster. It was made to fit into your existing work-flow, or be its own work-flow. From client files to design to code to getting out on the web, Elements is with you through out the entire process.

50. BlueTrip CSS Framework
A full featured CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity and Elements’ icons.

51. YUI Grids CSS
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

52. Emastic
Emastic is a CSS Framework. The Emastic mission is: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”

53. Compass
Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. You write your stylesheets in Sass instead of CSS.

Miscellaneous Tools

A list of miscellaneous CSS tools that can be useful and time saving.

54. Conditional CSS
Write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers – you can target CSS to any web-browser.

55. The Box Office
The Box Office lets you wrap, float or contour text around freeform images using CSS for usage in (X)HTML pages. Using The Box Office tool is very easy.

56. CSS Text Wrapper
The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

57. More CSS
Lightweight JavaScript library with CSS syntax for commong things: creating popups, tab menus, list styling, AJAX file inclusion, hyphenation and more.

58. Project Deploy
Deploy is a free, open source, online tool which allows users to quickly deploy a web project framework in only a couple seconds

59. Replace CSS Colors
Enables you to change the entire color scheme without going through the CSS code. Choose local CSS file, replace colors – download the new CSS file.

60. Object Oriented CSS
Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds predictability to CSS so that even beginners can participate in writing beautiful websites.

61. DtCSS
DtCSS is a PHP script that preprocesses your CSS file. It speeds up CSS coding by extending the features to CSS. Such as nested selectors, color mixing and more.

62. Boks
Boks is an AIR application that provides a user Interface for Blueprint CSS’s framework. It’s been designed for those who think the Grid System is good but never really took the time to give it love.

63. SilkSprite Blueprint Plugin
Silk Sprite is a Blueprint CSS plugin providing the Popular Silk Icon Package in CSS Sprite form to improve performance and ease of use.

We hope this list can be to some help for you and makes your work with webpages a bit easier. Once again, we encourage you to post tool tips if you find some useful CSS resource out there.