Topstyle: a CSS editor
Review first published by WindoWatch.com
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
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..
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.
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.
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.
Conclusion
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.
