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!
Enjoyed this article? Subscribe to MakeUseOf and get daily updates about new cool websites and programs in your email for free. Plus get free cheat sheets to your favorite programs.
Filed Under: Cool Software Apps ¦ Lists of tools
Tags: code, css, html, validator, webdesign, webmaster tools, WYSIWYG editor
Thanks! I’m just starting to learn CSS too (I really like it) and stuff like this makes it much easier to understand.
You can’t mention CSS menus without listing Listamatic (http://css.maxdesign.com.au/listamatic/) - the browser compatibility charts along with examples of each list are an absolute godsend.
@ Emma
Thanks for the link and feedback. I will give it a try with our new theme, we got plenty of menus there.
You collect so many useful CSS sites. I bookmarked this page.
Thank you.
New to CSS, but learning. Thanks a bunch. Here’s one I “stumbled upon” that puts any font you want live on the page and it works: http://www.mikeindustries.com/sifr
Great info. I’ve been trying to teach myself CSS in order to create a 3
column web page. I’ve bought books and look at the info on the web.
I have yet to get it right.
Thanks, I really do need to become more CSS-savy
For Mac users, Coda seems to be a good option, as well as CSSedit (my choice). I also like the firefox extension “firebug.” You can google any of these for more info. I’m also a fan of sites that showcase CSS sites. I usually check out http://www.csstux.com/ and open up firebug to see how things were done.
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm
CSS is so 2007.