Top 5 Free CSS Editors

There are a lot of good CSS editors available but not too many that are free to use, so I decided to do a review of the top five free CSS editors. Why use a CSS editor at all? A plain text editor is all you need to write cascading style sheets but, for most of us, having a good editor in our toolbox will speed up development time and help to troubleshoot and debug. If you use an integrated HTML/CSS editor you may find that the application is stronger on HTML than it is on CSS development. Or you may find that most of your development time is spent on the styling rather than the HTML code. In cases like this, a stand-alone CSS editor can be really useful to have.

Back in June 2008, Smashing Magazine published a comprehensive review of CSS editors. Almost all the editors they reviewed came with a price tag. Since a CSS editor is one of those applications that falls into the "nice to have but not really necessary" categories, you probably don't want to invest money in one. Luckily, there are free options available.

• CSS Toolbox
  
  

  CSS Toolbox streamlines working with CSS through auto-completion, syntax highlighting, validation, beautifying, and even compressing the finished product. At 1.5Mb it is one of the larger CSS editors out there but it packs a lot of features into a relatively small size.

  CSS Toolbox runs on Windows only. It supports CSS1 & CSS2.

• snap{css}
  
  

  snap {css} is a simple text editor for Windows. It's very lightweight and provides similar functionality to Notepad and other plain text editors but has the added feature of being able to collapse the code, or beautify it. At the click of a button, extra whitespace is removed, useless line breaks are done away with, and properties are condensed to save space and reduce file size. Click again to "beautify" and the same code is expended out for easier reading.

  snap{css} is free and open source. However, I was unable to find details about which license it is released under.

• TopStyle Lite
  
  

  TopStyle Lite is an oldie but a goodie. It offers syntax highlighting for easy readability, a colour chooser, and full preview so you can see what your changes look like as you go. It also offers validation against CSS 1 & 2, and Mobile.

  I have used TopStyle Lite for years but it is becoming outdated now. It is Windows-only, cannot be upgraded, and does not yet support CSS3. If you want a good, solid CSS editor though - it's hard to beat.

• Stylizer
  
  

  Skybound's Stylizer is a little different to most CSS editors currently available. It is a commercial product that reverts from full mode after 14-days, but you can run it in basic mode indefinitely. I found very little difference between the full mode (called "Ultimate") and the basic version - certainly not enough to warrant paying US$69.95. The Ultimate version offers a filter so you can quickly identify selectors that use the same rules, but the Edit feature on most browsers will do this just as quickly.

  Stylizer is not a text editor. It uses a grid interface and is not exactly intuitive to start with. Once you get the hang of it though it can certainly speed up development. It allows you to use both Firefox and Internet Explorer to view your changes on the fly.

  In my tests, Stylizer required Net connection in order to work. While I rarely work offline, I do like to have the ability to do so. On start-up, it connects to its own site and Google Analytics tracks your use of the help screens. Nevertheless, its a pretty nifty tool.

• Simple CSS
  
  

  Simple CSS runs on Macs, Windows and Linux and provides a simple, yet effective interface for creating a stylesheet. As the name says, this is a simple CSS authoring tool and while it may help you if you are relatively new to CSS it is not as fully featured as the others I have reviewed here.

  Simple CSS supports CSS2 only.

My top 5 were selected on the basis of them having no cost, support for at least CSS2, reliability, and ease of installation. In my tests, all performed reliably with the exception of TopStyle Lite that had problems when I had a Java app running at the same time. The output from each was good, but this depends very much on your own skill with CSS. Stylizer was probably the most useful for helping novices learn about good CSS practises.

Do you know of a good, free CSS editor that I may have missed?

If you enjoyed this post, make sure you subscribe to my RSS feed!