Developer

How do CSS editors TopStyle and Style Master stack up?

Two external cascading style sheet (CSS) editors--Style Master and TopStyle--can decrease your coding time. But which product should you choose? Find out which one offers the most functionality for the best price.


Cascading style sheets (CSS) pack more design punch than just control over scroll bar colors and font sizes. And if you're not satisfied with the CSS editor in Dreamweaver MX or other WYSIWYG editors, you may want to consider two external editors: TopStyle and Style Master. Here’s a quick overview of each and a look at how they compare to one another.

Making a statement with TopStyle
TopStyle was one of the first entrants in the CSS editor market. Loaded with features and a comparatively high price tag, the editor presents itself as the solution for all of your style needs.

For first-time users, the interface may seem quite different from the usual WYSIWYG editor. There are no object floaters or style windows. In a normal workflow of a WYSIWYG tool, CSS appears sidelined, but with TopStyle the spotlight is on CSS.

Take a tour of the interface, and you'll find properties that never appear in your favorite editor. For one thing, your editor expects you to know all about browser compatibility and hides CSS styles that newer browsers may support.

When you install TopStyle, a wizard asks you which browsers or specifications to target, the default layout for the program, and the preview browser you want to use.

The interface
The editable area dominates the major part of the interface, and that's where most of the action takes place as your style sheet evolves. One great advantage of the editable area is tag completion, which helps when you're defining styles on the fly.

However, if you can’t remember property syntax, fear not. The Style Inspector (Figure A) holds all properties related to a particular definition. You can select and define property values, which are categorized in their respective sections.

Figure A
The Style Inspector


The Tools menu holds various timesaving items. For example, the Style Checker checks your styles for compatibility as well as nonstandard declarations. The Edit CSS Positioning option will help you create positioned content. The main advantage of this option is that the preview is rendered in the browser (within the dialog box) and changes are reflected immediately.

Continuing with the preview options, you can choose whether TopStyle creates its own preview or uses a document you specify.

Plugs into Dreamweaver MX
TopStyle will also plug into Dreamweaver MX (DWMX) as the CSS editor. To enable this, you right-click on the CSS window in DWMX and choose Use External Editor.

Feature summary
The following features are the strong selling points of TopStyle:
  • Tag completion
  • Targeting specific browser(s) or CSS specifications
  • Style validations and checking
  • Preview while you write CSS
  • Miscellaneous timesaving tools

This editor will set you back $79. A 25-day trial is available at Download.com.

Style Master
Dreamweaver MX users may find the Style Master workspace familiar because it has a tabbed interface. All properties are categorized depending on their functions. The interface contains the following tabs:
  • Basic—set font, color, size, background color, style, and alignment
  • Preview—preview some of the styles
  • Font—define font families
  • Text Style—set advanced font and text properties
  • Text layout—specify letter spacing, line height, vertical alignment, etc.
  • Background—set background colors and images
  • Border—define border properties
  • Margin—select margin properties for the element
  • Padding—set element padding
  • Display—set the element's display properties
  • Layout—set the element's positioning

Beside each property, the ! icon reminds you that the browser(s) you choose may not display the style as intended.

Style Master's best feature is its CSS explanation window, shown in Figure B. The window offers a compact, concise CSS reference.

Figure B
The CSS Property Explanation window


To access this feature, click on the ? icon near the property. When you do, you'll learn several things about the property, including what it does, its possible and default values, and whether it's inherited.

For those still finding their way around CSS, the explanation window provides valuable information while defining element styles.

Feature summary
Here are Style Master's best points:
  • It offers well-written, context-sensitive help and a free CSS guide.
  • It targets specific browsers.
  • It lets you select and define styles.

Table A shows how the two editors match up.
Table A
Features  TopStyle Style Master
Authoring support for browser compatibility 
Authoring based on CSS specifications
Tag completion   
Select and define styles  
Style checking and validation  
Internal browser preview  
Builds preview page based on current stylesheet    
CSS documentation    (basic)   (advanced)
Context sensitive help    
Easy comfort level for WYSIWYG users    
Price $79 $49
Editor comparison

Making a choice
If CSS is going to take a lot of your time, and you don't have much money to spare, go for Style Master. At $49, its features make it a good sidekick for your CSS adventures. If you want to test-drive Style Master, you can pick it up at Download.com and have 21 days to decide if you want to purchase it, or you can download a 30-day trial version from the company’s Web site. However, if you want to come to the CSS party and make a serious statement, go with TopStyle.

Editor's Picks

Free Newsletters, In your Inbox