On the surface, TopStyle looks like just another text editor, but it’s really not. You’ll first notice the editor window, which is right in the middle of the screen in the default layout. Note how I said the default layout. You can switch on-the-fly between the default layout, the beginner layout, the compact layout, and the minimal layout. Moreover, you can save custom layouts that you make, and switch to those at any time. A nifty feature, that’s for sure.
To the right of the screen is what TopStyle calls the “style inspector”. You can choose a style definition (CSS Level 1, 2, Internet Explorer 4, 5, 6, Netscape 4, 6, Opera, etc.) from the pulldown menu, and then insert attributes into the editor based on that definition. For instance, if I pick CSS Level 2, I can see all the attributes for that definition. Then I can click on “background-color” and enter a value of “#ffffff”, which gets sent to the class that I’m currently working on. With this feature, you don’t have to memorize any CSS commands, because the program lays them all out in front of you.
To the far left of the screen, there are two different tabs, the “selectors” tab and the “palette editor” tab. The selectors tab contains a list of all the Elements, Classes, and IDs currently in use in the active file. You can click on one of the class names to be brought straight to that class in the editor. This tab also serves as a sort of outline for the whole sheet. The other tab is the palette editor, which displays all the colors being used in the current sheet. You can see at a glance which colors are being used, and for what element, class or ID they’re being used on. You can also lighten or darken all colors, convert them to browser-safe colors, or even convert them to grayscale colors.
