TopStyle Pro: The 'HomeSite' of the 21st Century? The 'HomeSite' of the 21st Century? Lee Underwood
Of the many ways to create and edit Web pages these days, arguably the most useful is the HTML/CSS combination editor, a leading-edge tool that helps to save valuable time in the editing process. One of the best HTML/CSS combination editors, TopStyle Pro, was developed by Nick Bradbury, creator of the HomeSite HTML editor. For those of you who like the highly popular HomeSite editor, you'll love TopStyle Pro. This program is jam-packed with all kinds of features.
TopStyle is a (X)HTML/CSS editor, a useful combination that helps to save valuable time in the editing process while also delivering access to the latest tools and tricks for Web design. As just one small example, changes made to the main style sheet can be viewed immediately from within the software. This means not having to upload the (X)HTML document to your server each time you want to view the changes.
The program provides many areas of customization. You can even create your own keyboard shortcuts that work one way in a style sheet and a totally different way in a (X)HTML document. The software can also be integrated with a number of other tools, such as 40tude HTML, AceHTML, HTMLKit, and NoteTab Pro.
The Basics
The program's interface is pretty much standard — it's what's included in the interface that sets TopStyle Pro apart. In the Default Layout (there are three included), the middle of the screen contains the work area. Located on the right and left sides of the edit area are several different panels. (These panels can be hidden if desired.)
One of the panels contains the Clip Library. You can store snippets of code here and reuse them in other documents. Another panel contains the CSS Palette Editor, used to view and change the colors in the current style sheet or style block. The Style Inspector panel displays the properties of the code on the selected line in the editor. It gives the attributes of each property, listing even the deprecated ones.
The Selector List panel displays each selector used in the current style sheet, divided into elements, classes, and IDs. Clicking on a selector will highlight it in the editor. Creating new selectors can be done either manually or by using the Selector Editor.
Located at the bottom of the screen are five tabs: Preview, Style Checker, Messages, Tidy, and Reports. Results from these different tools are displayed there. The active document is displayed in real-time in the Preview tab.
Clicking on a link in a (X)HTML file will open the file in the editor, if it is on the local drive. Otherwise, it will be displayed in the default browser.
