Topstyle: a CSS editor

Review first published by

Review of updates for Topstyle 2.5

Topstyle is a CSS editor for IBM PCs from Bradbury Software. If you have any inclination to try style sheets on your website, you owe it to yourself to try this editor. I heard about this product because Homesite 4.5 uses Topstyle lite for CSS editing. Since I liked the Homesite style editor, I had to find out why it was being dropped. The short answer is, Topstyle is much better.

Features of TopStyle

Topstyle supports CSS1 and CSS2 and makes it very easy to specify a stylesheet that is CSS1 compliant, CSS2 compliant or Netscape or Internet Explorer compatible. It has an inbuilt CSS style checker or test your style sheet at the W3C site. As you select, it can warn you what style attributes are not well supported by IE3, IE4, Netscape 4. It previews the styles as you build them. It also has a reference guide to CSS1 from the Web Design Group.

Layout of the tool

Topstyle full screen The default layout of TopStyle includes a toolbar along the top, views on the left side, a main edit window and CSS inspector on the right. The toolbar is where you'll find buttons to locally validate your style sheet or you can go online to check the CSS at the W3C site. Views on the left can provide you with information about the style sheets used on your site and what files link to which sheets..

Main edit window
This is where you can directly type in your desired styles. The styles are colour coded, to make reading them easier. The little minus signs on the edge means the rule is fully expanded. A little plus sign on the edge would indicate an area that can be expanded. You'll find as you move between parts of the style sheet, the Style Inspector box to the right will change.

Style Inspector
The style inspector box on the right has one feature that truly stands out for me. Styles that are being used appear at the top of the box automatically and are colour coded. The drop-down menu at the top allows you to set a level of CSS. Only properties permitted in that version of CSS will be displayed below. Once you have set the level of CSS, scroll down the list of properties until you find the one you need. Then click to set the value. Under the Style Inspector is a set of little radio buttons. A full dot in the button means it is fully supported, a half dot means partial support and an empty button means there is no support. You'll notice the buttons exist for IE3 IE4 and Netscape 4.

Below this window is the Selectors window. From here, you can create a new selector, duplicate a previous selector, delete one of your selectors. The window shows first shows element selectors (like H1 or P), then class selectors and finally ID selectors. Double click any of these to bring up the details in the main edit window.

Output window
This window, if open, can demonstrate the styles you've set so far. If you run a local check on your style sheet, warnings or comments will appear here as will.


Soon after I discovered this program, it became a necessary tool for my web development. It's easy to use and makes verifying your CSS a breeze. It is the first CSS tool I've seen that allows you to directly type the CSS in a window instead of forcing you to build it from a menu system of some kind. I love how the Style Inspector makes it easy to choose a level of CSS appropriate for your needs, and how the little radio buttons show you support for your chosen style. Some of the little things make the biggest difference. Like the select colour tool which can select from pre-defined colours or the web safe colours, or from grey scale or build your own mixing red, green and blue using sliders. All up, a tool I don't want to live without now...well, not until the next version.

Review of updates for Topstyle 2.5

This review is copyright © by Lynn J. Alford (more about the author). Send mail

Home Page | Software Review Index | List of Game Reviews | Sponsor this site
Search WWW Search
privacy policyOrder your Platinum Visa Card