Home arrow HTML arrow Page 2 - Review: TopStyle Pro v3.0

Review: TopStyle Pro v3.0

TopStyle is a HTML, CSS and XHML editor. Come join Havard in this review as he takes a detailed look at TopStyle and its many, many cool features.

Author Info:
By: Havard Lindset
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
July 09, 2002
  1. · Review: TopStyle Pro v3.0
  2. · TopStyle Features
  3. · Conclusion

print this article

Review: TopStyle Pro v3.0 - TopStyle Features
(Page 2 of 3 )

The first time I started TopStyle Pro, I was welcomed by a configuration wizard, which many newbie users should find useful. After I had gone through the six-step configuration, the program popped up. It didn't take long before I felt at home, but I've used TopStyle before, so that may have cut the learning curve in half.

Style Inspector
You'll be using the style Inspector when you're editing CSS. It contains all of the CSS-styles available for the selected style definition. Anyone can easily switch between the different style definitions. Take a look at the screenshot below. The style definition shows and hides different styles from the inspector, cohering to the selected definition. This feature can make your CSS coding more consistent. Styles that are not in the selected definition will be marked with a red color in the editor window.

The style inspector

When you select a style, you will see a list of browser names in the bottom of the inspector. Before each browser name there is an empty circle, a half circle or a full circle. This tells you which browsers support the selected style. You can specify yourself which browsers you want to see compatibility info about.

If at any time you need to know what a style does, select the style, and press F1 (or click the little ? icon at the bottom of the inspector). This will pop up a help screen with information about the selected style.

Tag Inspector
You'll be using this feature when you're editing HTML and XHTML. It's similar to the style inspector, but has fewer features, however it's still very useful.

Editor Hyperlinking
This is one of TopStyle's unique features. When you hover your mouse over a link to a stylesheet for example, the line will be underlined, just like a hyperlink on a web site. If you click on the link, TopStyle will automatically open the document in the editor if it's not already opened. It even links class="" attributes in tags. When you click on them, TopStyle will jump directly to the class. Hooray for productivity!

Editor hyperlinking

Style Sheet Link Wizard
So, you've got 203 HTML documents,and all of them have styles embedded in <style> blocks... what do you do? The style sheet link wizard will fix the problem for you. Make the style sheet file, and run the wizard. The wizard will then add a link to to style sheet in the site, folder or file(s) specified. It will even remove the style blocks in the documents if you'd like it to! This little puppy could save you hours of hard work!

The style sheet linking wizard

Color Palette
TopStyle's handling of colors is top notch. It has a plethora of palettes, and it even allows you to import your own. It allows you to view the color either as a palette, or as a list of named colors. Another great feature of the color handling is the harmonious color finder, which automatically finds colors that are harmonious to the selected color. We can also use the default windows color palette, just like the one we see in other programs. I should also mention that all of the colors used in a CSS document are listed to the left of the editor window. This makes it easy to insert common colors.

The color palette

Options and Customizations
The options dialogue let's you change TopStyle's behaviour. There are a lot of options, so a feature that would've been nice to see here is an option to export the settings. If you do a lot of configuration, you might want to keep the config file after a full reinstall of windows for example.

Options and customizations

Another useful feature is the abilities to make a so-called "site". TopStyle's sites can be compared to HomeSite's projects. When you create a site you define a site name and a root folder. After you've done that, you can select your site from the sites bar.

When you have a large site there are several features that can help you manage it, like site reports, which can tell you about orphan classes (classes that aren't in use by any file in the site), case mismatch (for example if the class called "classOne", and it gets called from a html tag by the name "classone"), class usage (where the classes are used), undefined classes and an ID overview. By using this tool you can remove redundant classes, etc.

Other mentionable features
  • Style Upgrade: This tool replaces all presentational mark-up in a HTML document with embedded styles. Useful if you have a site where you'd like to control it's presentational aspects using CSS.
  • Spell Checking: This is an English spell checker for HTML. A feature I didn't find in this spell checker was to spell check all open documents, or the entire list of HTML files within a site. This could be a useful addition.
  • CSS selectors list: A list of all elements, classes and ID's present in a style sheet. If you right click on an item, you can even comment it out in the source.
  • Thumbnail Viewer: Select a folder and get a thumbnail list of all images contained within that folder. Drag and drop directly into CSS or HTML documents.
Features I'd love to see in future versions
  • Syntax coloring of PHP, JavaScript and other scripting languages
  • More embedded browsers, like Opera
  • More features geared towards HTML, PHP and other languages

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials