Update 10/6/06. My comment from late January turns out to have been a major understatement. Style Master makes CSSEdit look like a toy, to be honest. It has so much power and so many functions that its interface struggles to retain the simple intuitive grace that Mac OS X software is famous for. And I have to say that it does succeed. Although it takes longer to get to know than a simpler tool like CSSEdit, the study is rewarded with the kind of power that will carry you through the toughest style sheet tests.

Style Master pitches itself as the right tool no matter what your skill level with CSS, and I suspect that may be true. Being myself way past the beginner stage, it’s hard to evaluate it from that perspective. However, certainly Style Master has a plethora of “wizards”—as well as tutorials, references, and other resources—that would be great for getting you started on a CSS-based website. There are entire website templates as well—all using CSS instead of HTML, of course—as well as starter kits for blogs based on WordPress, Movable Type, and Blogger. Specific wizards walk you through setting up basic style sheets, page-layout style sheets, and stylesheets for page components like breadcrumbs and tabbed navigation.

The company that makes Style Master, Westciv, appears to have only one line of business—CSS. That line has two components: One focuses on training courses (which are available for sale), and the other focuses on Style Master (the tool component). As such, making CSS accessible to beginners is an important facet of what Style Master tries to accomplish.

Still, they understand that there are by now many designers and programmers who have intermediate and advanced CSS skills, and Style Master is chock full of goodies for them as well. Need to see the generated CSS for a given website? No problem—You can load the site into Style Master and have a look. The “Get Info” function, always available for any selected CSS statement or page component, has four tabsfull of info:

1. Info: This pane shows syntax and usage information.
2. Compatibility: What browsers support this element/attribute/function?
3. Style: This is where the computed style shows up. StyleMaster shows you the value of every CSS property that’s set for the selected element.
4. HTML: Here, you can peruse the HTML source code for the selection.

Style Master amazed me in several ways as I tested it out. I’m not going to go through a comprehensive look at all the interface features… just at the ones that impressed me the most. To start with, I learned how Style Master can import a style sheet from any website… pretty essential if you want to jump in and work with the CSS code for an existing website. I did have to refer to the documentation to learn how to do this. By default, Style Master can import web pages from your hard drive, but by setting up a website in your “Preview Options” pane, it will load any URL, thereafter displaying the style sheet it reads.

One of the first power features I was impressed with was the way Style Master can format your style sheet rules. Even if it imports a scrunched, optimized set of styles (as it did with mine), you can select Edit/Format Style Sheet, and Style Master will reformat the rules so they’re readable, using formatting you define in the Preferences window. This was marvelous, but what really did it for me was the realization that StyleMaster has the ability to always upload an optimized version to the website. This lets you work with a human-readable version in StyleMaster, but let the browser read a much smaller version when it downloads your web pages.

Another power feature I know I’m going to enjoy is Style Master’s ability to identify “orphan” rules. How many people besides me learned CSS by adding rules until something worked the way we wanted? Given browser differences and general CSS quirks, quite often the rules just wouldn’t work the way they were supposed to… so you might leave a declaration in place whether it was needed or not. This kind of behavior can really lead to style-sheet bloat, and Style Master’s ability to sniff out unused rules should help shrink that back.

After I’d played with the software for awhile, I discovered a very useful option in the “Statements List” drawer, which you can optionally display on the left-hand side of the StyleMaster window. By default, this drawer lists all the CSS statements defined in a given style sheet. (The order of display is configurable.) However, when you have a style sheet as big as the one for Musings from Mars, that becomes a very long, scrolling list. Fortunately, Style Master will jump to or highlight statements that are contextually relevant when you select something in the preview pane. But even better, you can toggle a setting in the drawer’s “gear” menu that tells Style Master to only show statements relevant to your current selection. This is a very powerful way of filtering that list into a usable length.

Working with Style Master is like watching a really talented dancer. Everything is done in a smooth, coordinated fashion, and with a grace that delights and satisfies. Select an element in the stylesheet code view, and Style Master will also select the relevant CSS statement from the Statements list. If you have Style Master’s handy visual CSS-builder tool open, it will automatically switch to show the right pane and display the selected values. Meanwhile, if you have the “smart” preview pane open, Style Master will highlight the HTML element that’s using the rule you selected. The same thing happens if you select an HTML element in the preview pane or a CSS statement from the Statements list. Given all this coordinated action, it’s really quite hard to get lost.

A couple of other features that will keep me using Style Master are its good FTP support, so you can download and upload files from within Style Master, and its ability to create CSS statements from selected HTML. This latter feature requires a bit of an explanation. Basically, it means that you can import an HTML page that has no style sheet and ask Style Master to create one based on the formatting it finds. Is that cool, or what? You can do this on a micro level also… that is, select a portion of an HTML document, and you’ll find a contextual command in Style Master to make “New Statements from HTML.”

Style Master will continue to surprise me, I think, as I get to know it better. And I’m convinced I’ll have to fork over the dough to get it, too! At $60, it’s quite a bit more than the $25 CSSEdit (which I bought last year), but I expect I’ll be relying on it quite a bit more than I rely on CSSEdit these days. I expect I’ll still find the need to call upon the marvelous XyleScope now and then, but I may not need it quite so often.

Version as tested: 4.5.