Overview
CSSEdit from MacRabbit is a specialized editor for working with the cascading style sheet (CSS) files which are an essential part of modern, standards-compliant website creation. You can download a demo version from www.macrabbit.com and use it for files of up to 2500 characters. The full version costs $29.95.

Installation
After installing CSSEdit using my admin account and entering the license code, I was able to use CSSEdit on my user account. The only issue was having to re-enter the license code on my user account.

Why CSS?
Much has been written about the benefits of CSS. Simply put, CSS allows you to separate the content of your web pages from the presentation: you define the content in HTML (or XHTML) and the presentation in CSS. The hallmark of this way of working is an absence of HTML <font> tags and multiply nested layout tables.

If you use Realmac Software's Rapidweaver, you are already doing fully standards compliant, high quality CSS based design - whether you know it or not. You may not care that your Rapidweaver buddies can point to the new website that you're so proud of and instantly name the Rapidweaver template that you used. But if you do care to make Rapidweaver templates of your own, you need to learn to change the underlying CSS files. Once you start down this path, you will rapidly discover that understanding one CSS style may be easy, but understanding how several CSS styles work together in multiple files is mind-boggling.

First impressions
When you open CSSEdit for the first time, you will see the two empty windows - one for CSS, the other for previewing the HTML. The preview window contains a graphic indicating that you should drag an HTML file into it. Doing so will indeed display the HTML file, but what next?

CSSEdit Preview window

At first glance, and without referring to any documentation, I was not sure what to do. If the HTML file contains links to style files, CSSEdit did not automatically open them in the CSS window. If the HTML file contains inline styles, CSSEdit did not display them in the CSS window. If you start typing CSS into the CSS window, nothing happened to the preview.

This is somewhat baffling initially, but once you understand how the CSS and HTML files are connected, it makes sense. The CSS file must be saved with a filename, and then that filename must be linked in the HTML file - something that CSSEdit can do for you in an instant. Once this is set up, changes in the CSS will instantly be displayed in the preview window. So, any confusion here is just due to CSSEdit getting ahead of the first-time user.

In Use
The CSS window is divided into left and right panes. The left pane shows the selector (tag, class or ID) for each CSS style in the file on a single line. This is already a huge help in finding your way around the file. Here you can create new styles, delete unwanted styles and also reorder styles by simply dragging them up and down.

The CSS Window

Probably the biggest benefit for the seasoned CSS user is that you can create groups of CSS styles, expand and collapse the groups, and nest them. The grouping is defined in the CSS file using specially formatted comments that you can easily read and enter yourself. You can also edit your CSS file manually using any other text editor, and then go back to using CSSEdit without issue.

If you can't find a particular style, entering a few characters from its name in the filter field instantly cuts down the list of styles to show only those names which contain the filter characters. For example, entering "oo" shows all the styles with "footer" in the name.

CSSEdit helps you get a mental grip on one big CSS file. Further, when you are working with multiple CSS files, you can open each in its own window and compare them side by side. In Rapidweaver templates, for example, you will find all the color definitions are split out into separate CSS files so that Rapidweaver can switch the color palette for your website by switching which CSS file is used for the colors. A similar strategy is used for page width, sidebar position and menu styles.

CSSEdit's right pane can show either the text view of the file or one of seven inspector tabs which allow you to define an individual style using forms and buttons. Any change you make in the text view shows in the inspector view and vice versa. Both the text view and the inspector views of the style are beneficial. The inspectors allow you to create correct CSS without memorizing the syntax, whereas the text view allows you to see the whole of a style at one time without scanning back and forwards between the seven tabs.

If that was all CSSEdit did, it would already be enormously useful. However it has a few more tricks.

• show individual styles in the preview drawer
• drag an HTML file to the preview window and see it update instantly when you change the CSS;
• preview emulates a variety of browsers;
• copy selected styles to the clipboard between HTML <style> tags for insertion into an HTML file;
• export CSS to existing HTML files or to a new HTML file;
• extract the CSS styles from a website anywhere on the internet by supplying its URL.

The only minor disappointment with the HTML file creation is that CSSEdit doesn't supply the pretty much impossible-to-remember DOCTYPE syntax for the top of your HTML or XHTML file, so you will need to find another source to copy and paste it from.

Summary
CSSEdit is an essential tool for anyone working with cascading style sheets. It allows you to work easily with large and complex CSS files by displaying the styles in collapsible groups. It provides all the CSS syntax so that you don't have to remember it, but still allows you to view and enter the CSS text as much or as little as you like. CSSEdit is also great companion tool to Rapidweaver for the designer who wants to create unique templates. Once you have experienced CSSEdit you will regret all the dark days you spent wading through your CSS files without it.

Pros

• view, navigate and organize large CSS files;
• point and click definition for CSS styles;
• compare CSS files side by side;
• live preview as you work;
• export to HTML.

Cons

• Doesn't supply DOCTYPEs
• Preview is confusing for the first time user.

Overall Rating

4 1/2 out of 5 Mice