I am currently in the process of learning CSS (Cascading Style Sheets) based web design since it is now the standard foundation of layout for almost all web sites. I have read several books now and I still believe that I am slightly lost when it comes time to applying what I know from scratch. Over the past several months, I’ve been keeping a list for myself of potentially amazing tools and applications (most web based – all of them free) to make my CSS web design experience a snap. I purposely cut out over 30 options from this list, because these are the most user friendly and simplest to use.

Most descriptions are taken from the web page, since only an author can describe his tool the best, but I threw in some comments in parentheses. None of the options below are resource lists, they are pure applications or tools. Enjoy and I hope you learn and benefit from the following list…

Complete CSS Coding (Layout, Fonts, Colors, Tweaks)

(1) HTML PHP CSS Website Template Maker – CSS template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout.

(2) CSS Toolbox (Desktop ““ Windows) – Free CSS Toolbox includes a number of tools for fast-tracking and enhancing the development of style sheet code, such as an advanced CSS Formatter and CSS Validator.

(3) 1-3 Columned Page Maker – Broken down into sections with all the necessary variables).

(4) CSS Generator – make simple cascading style sheets (everything but columns and layout).

CSS Layouts

(5) Boxed CSS – Boxed CSS is a free website that offers you CSS grids : they are free to be downloaded and modified, without a linkback required.

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

(7) 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.

(8) Lay-out-a-matic – Simple layout options (few options in my opinion).

(9) YAML Building – A tool for layout development of YAML based CSS Layouts (YAML = Yet Another Muliti-Column Layout).

(10) CSS Grid Calculator – Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways.

Style Sheet Editors

(11) CSS Fly – CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get!

(12) CSS Vista (Desktop/Windows) – CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

Optimizer and Tweaking and Validators:

(13) CleanCSS – Powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

(14) CSS Tidy (Download/Open Source) – CSSTidy is an open source CSS parser and optimizer.

(15) CSS Tweak – Take your CSS and optimize it so that file sizes and download times are reduced. This tool is different from other optimizers as it gives you the option to stop it from altering your CSS code layout.

(16) W3′s CSS Validator – Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.

Additional Inputs and Options

(17) CSSTYPE – Web safe typography on screen for pixel perfectionists.

(18) List-u-Like CSS Generator – Create cross-browser list-based navigation bars with ease.

(19) Colly’s CSS rollover generator – With this CSS rollover generator, you can create two distinct styles of rollover button, using CSS and just one image.

(20) Rounded Cornr – Generate HTML/CSS code and images for rounded corners.

(21) Spiffy Corners – Offers a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

(22) The Box Office – lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

(23) CSS Menu Maker – making professional CSS menus simple, for the average webmaster.

(24) CSS Scrollbar Color Changer – The CSS for the scrollbars that you create is displayed automatically below. Copy it into your HTML page to easily change the scrollbars for your web site.

(25) CSS Sprite Generator – Generate CSS Image Sprites.

That’s pretty much it. Got a favorite CSS tool that’s not in the list? Drop it in comments. Enjoy!