By Dale Farris, Secretary
Golden Triangle PC Club
March 2002

Program Overview

TopStyle Pro 2.5 is the award-winning cascading style sheet (CSS) editor written by Nick Bradbury, creator of HomeSite. TopStyle Pro 2.5 contains everything you need to create flexible, cross-browser cascading style sheets.

Why should you use cascading style sheets in your Web site development? Because you can update your entire site's appearance in seconds, that's why! Style sheets enable you to separate your site's content from its presentation, making global changes much easier.

What are Cascading Style Sheets?

If you've created a web site without using cascading style sheets (CSS), most likely you relied on an assortment of <font> and other HTML required tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your site's design. Suppose you later decide you want to change the color scheme or fonts used in your site. You will have to edit every page in order to do this.

Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the look and feel of your site. Later, if you want to change how your site looks, you simply modify the style sheet.

What are the Drawbacks of Style Sheets?

Style sheets do have a downside. Right now the biggest problem is the imperfect CSS implementations that today's browsers offer. Even though the World Wide Web Consortium (W3C) issued their CSS 1 recommendation way back in 1996, not every browser fully supports these recommendations. Worse, what they do support is often very buggy. This makes it difficult to create style sheets that work across all browsers, since what looks good in one browser may look awful in another browser (for example, Internet Explorer versus Netscape Communicator).

This is where TopStyle Pro 2.5 comes in. TopStyle Pro 2.5 helps you create cascading style sheets that work across browsers by alerting you of problems as you work. TopStyle Pro's style checker validates your code, warning you not only of errors in your style sheet, but also of bugs in popular browsers that may affect its rendering.

If you want to learn more about style sheets, just download the trial version of TopStyle Pro 2.5 from the Bradsoft.com Web site and step through their simple tutorial. This will get you up-to-speed on using cascading style sheets, and it's also a great way to get started working with TopStyle Pro 2.5.

What's New in TopStyle Pro 2.5?

Powerful site reports provide overview of style usage in a site

Fast, flexible palette editor enables viewing and modifying all colors used in a style sheet

Improved color editing

Integration with Macromedia Dreamweaver and Dreamweaver UltraDev through the TopStyle Extension

Support for Mac versions of IE 5 and Netscape 4

User interface improvements, such as improved docking, new "Office XP" toolbar and menu styles, simplified wizards, and a customizable view bar

Upgrade wizard to copy settings from the previous version of TopStyle Pro

Support for XML documents in the preview

Redesigned style sweeper enables easier reformatting of your style sheets

"Hyperlinking" of @import rules and background-image values.
For example, hold down Ctrl and click on an @import rule, and the @imported style sheet will be opened (or downloaded) for editing.

Improved help.
If TopStyle Pro's built-in help doesn't support the current cascading style sheet property, it will attempt to find help on external sites (currently W3C CSS 2 Specification and IE CSS Reference).

Still More New Features

Palette editor enables quickly viewing and manipulating all color values in a style sheet

Right-clicking on a color value enables a Luminosity editor in the context menu for easy color manipulation

"Docking Style" setting added to the General page in Options
When "Stacked" is chosen, docked panels (Inspector, Selectors, Output, Palette) are stacked on top of or next to each other when docked, which is the way TopStyle has worked since version 1.5. When "Tabbed" is chosen, docked panels are shown on separate tabs. Note that the order of the docked panels can be changed by dragging the tabs.

The Color Picker includes RGB and HSL selection
The previous version only showed RGB selection when "RGB Entry" was chosen from the list, but now RGB selection is always displayed.

The Color Picker has a toolbar button which creates the custom color palette by extracting all colors from the current style sheet. In addition, the number of custom colors has been doubled.

Office XP menu and toolbar style

Redesigned Link Wizard now uses simpler tabbed interface

If the previous version of TopStyle is installed, the first time TopStyle Pro 2.5 starts it will display a dialog asking whether you wish to copy settings from the previous version.

Added "Hide duplicate messages within the same style definition" to the Style Checker page in Options. When this is selected, the style checker results will only warn about an error the first time it's found per style definition. For example, if you use the cursor property throughout your style sheet, the style checker in previous versions would flag every use of the cursor when validating against CSS Level 1 (since cursor isn't supported by CSS 1). Checking this option will cause only the first use of cursor to be flagged.

Property help may now be shown on multiple rows instead of one scrollable row. See the "Property Help" page in Options to turn this setting on.

Multiple style sweepers may now be defined
When the style sweeper runs, it will use the sweeper that is set as the default in Options. Note that the built-in Dreamweaver 4 sweeper is defined so that it will reformat your styles for use in Dreamweaver or UltraDev, working around some CSS-related bugs in those tools.

As with previous versions, help for the current property is displayed if F1 is pressed while in the style inspector. Now, if help for that property isn't available, TopStyle Pro 2.5 will display a page linking to external sites (currently W3C CSS 2 Specification and IE CSS Reference) which do contain help, and clicking a link on this page will take you directly to help for the current property.

Holding Ctrl and moving the cursor over an @import rule in the editor turns the @import into a hyperlink. Clicking this hyperlink will open or download the imported style sheet.

Holding Ctrl and moving the cursor over a URL value (background image value, for example) will turn the value into a hyperlink. Clicking this hyperlink will open the file in its associated application.

Style Checker help now appears below the style checker instead of in a popup hint window. This can be turned off on the Style Checker page in Options.

The File, New submenu now includes the ability to create a new style sheet using the selectors from an existing style sheet.

XML documents may now be used as preview files
Note that only XML documents with an XML version declaration are supported.

Periods that come before class names in the editor now appear in bold text to make them stand out.

The view bar can now be customized. New groups may be added, and custom items may be added to these groups. Custom items may point to either local files or URLs. Custom items that point to CSS files will be opened in TopStyle Pro 2.5, custom items that point to URLs will be opened in your browser, custom items that point to local files will be opened in the associated application. Note that pre-defined groups (View, Sites) cannot be modified.

The "Exclusions" settings for a new site now includes the ability to exclude HTML files matching a specific pattern from your site.

Property Help page in Options now includes the option to hide style definitions which don't support the selected property. When this is selected, property help will only tell you which style definitions support or partially support the selected property.

New Netscape 4 and Internet Explorer 5 style definitions for the Mac

The Color Picker now includes a Nearest Safe item which shows the browser-safe color closest to the selected color. Clicking on this will change the selected color to the browser-safe color, and double-clicking it will choose the browser-safe color.

Recreate Site item added to the File menu. This enables rebuilding a site from scratch, displaying the New Site dialog for an existing site.

Rename Class has been added to the Search menu. All instances of the selected class will be renamed.

"Remove optional semi-colons" added to Style Sweeper settings. When selected, this option tells the style sweeper to remove the semi-colon from the last value in each rule.

Property Help redesigned to use a completely filled circle for style definitions which fully support the current property and a half-filled circle for those that partially support it.

The context menu for property help now enables selecting multiple style definitions at once. Previously, the menu would close with each selection.

Added Black and White scheme to the Editor Color Coding page in Options.

On Windows 2000 and XP, the Search/Replace dialog turns transparent when a match is made.

The Open from Web feature now enables running the style checker after downloading has completed.

The General page in Options now includes a setting which dictates whether to insert a space before or after the colon whenever a property is inserted into the editor.

Added Lowercase color names setting to the Color page in Options.

When in Split-Editor view, the inactive editor now grays its tabs to better indicate which editor has the focus

Improved performance in the style checker

The "Include blank lines in collapse" setting for collapsed rules has been dropped. Blank lines are now always included in the collapsed rule.

Further reduced resource usage under Windows 95/98/ME

Site Features

The underlying format for TopStyle sites has been completely rewritten, resulting in a number of changes and additions to existing site features.

Added "Site Reports" view, which displays the same "Orphan Classes" and "Undefined Classes" information that was previously shown by the Orphan Style Finder (except without the wait!).

In addition to the above, the new Site Reports view includes a "Class Usage" drill-down report which shows where specific classes are being used in your site.

The Orphan Style Finder has been dropped as a separate feature since it's now incorporated into the Site Reports view.

Rebuilding a site no longer displays a dialog prompting for the type of rebuild to perform. Instead, a "Complete Rebuild" is done as soon as you click the "Rebuild" toolbar button. In other words, there is now only one type of site rebuild instead of three.

In previous versions, each site was stored in a single file. In this release, a site is stored in several files within a separate directory named after the site. Every site directory is located under TopStyle's main \SITES folder. This probably makes little difference to most people, but is mentioned for those that make backups of their sites.

Added "Style sheets with @import statements" to Site Summary

Added "Links" column to file list in Site Summary view. When an HTML file is listed, this column contains a comma-separated list of style sheets that are linked to that HTML file.

The "Edit Links" feature is no longer available in Site Summary. All site-based link editing is now done in Site Links view.

Site Links view now enables selecting multiple files in the list of HTML documents. When more than one HTML document is selected, the list of linked style sheets will show style sheets that are linked to every one of the selected HTML documents. Right-clicking in the list of linked style sheets and selecting "Remove Link" will affect all selected HTML documents.

Pressing Ctrl+A while in Site Links view will select all files in the HTML list. If the list is grouped, only files in the current group, or folder will be selected.

Double-clicking a remote style sheet in Site Summary view will download it into the editor.

What is a Markup Language?

When you format text to be printed, or displayed on a computer or on a TV, you need to distinguish between the text itself and the instructions for printing the text. The markup is the instructions for the text, and the markup language is used to create these instructions. When you are looking at a typical web page, one that is not set up in frames, when you click on the View, Source menu command, your browser will open the page and show you all the complex markup language instructions that will be entered inside brackets and that instruct the information to appear as it does in the browser.

Markup can also indicate information about the text. For example, many students in school will highlight certain phrases in their text books. This indicates that the highlighted text is more important than the surrounding text. This use of a highlight color is an example of a markup language.

What About HTML?

Hypertext Markup Language (HTML) is the language of the Web. All Web pages are written in HTML, and HTML defines the way that images, multimedia, and text are displayed in Web browsers. HTML includes tags to connect your documents (hypertext) and make your Web documents interactive (forms).

HTML is a defined standard markup language developed by the World Wide Web Consortium (W3C). HTML is based upon SGML (Standard Generalized Markup Language), and is a language that uses tags to define the structure and some style of your text. Tags are defined by the < and > characters that occur before and after text.

However, HTML is no longer the most current standard for Web development. As HTML was developed it got more and more complicated, and the style and content tags combined into one language. Eventually, the W3C decided that there was a need for a separation between the style of a Web page and the content. A tag that defines the content alone, such as <h1>, would remain in HTML, while tags that define style, such as <font>, are deprecated in the latest version of HTML in favor of style sheets.

So, now Web site developers need to learn how to work with cascading style sheets, and TopStyle Pro 2.5 is one of the best tools now available to help you with this necessary task.

Targeted Customers

In web site development, cascading style sheets apply consistent formatting to multiple elements and facilitate the exact placement of page elements. However, the CSS function is weak in most Web authoring and editing programs, such as Front Page, or Dreamweaver. TopStyle Pro 2.5 takes up the slack with a flexible inspector display that matches CSS features to different browser versions. The program also has an accurate preview of the effect of style changes on a Web page, and its site management features let you control all uses of styles throughout a site.

TopStyle Pro 2.5 is an essential tool all web developers should seriously consider, especially if they want to migrate their content into the use of cascading style sheets.

For students brand new to markup languages, this software will likely be considered later, as I suggest first learning the fundamentals of working in HTML with any HTML editor, before beginning to add in the techniques used with TopStyle Pro 2.5. This software will be a valuable tool once there is a sound understanding of coding and tagging documents in order for them to open as desired in a browser.

Price

$49.95
Free upgrade to version 2.5 from version 2.0
$19.95 upgrade price from version 1.5 (requires existing copy of 1.5)

Only available electronically - No CD ROM disc is shipped - So, back up your downloaded file and back up the email confirmation that registers your downloaded file.

Minimum System Configuration Requirements

PC with Pentium 100 MHz or higher processor
Windows 95, 98, ME, NT 4 (SP 3 or later) 2000, XP
32MB RAM
8MB free hard disk space
VGA or higher-resolution monitor (SVGA recommended)
IE 4 or later for internal previewing and HTML-based help features

Note: TopStyle Pro 2.5 was designed to be very system-friendly and use as few resources as possible. However, because TopStyle Pro 2.5 uses Internet Explorer and Netscape Gecko for internal previewing, memory requirements may be greater depending on the types of web pages previewed.

About Bradbury Software

Bradbury Software, LLC ("Bradsoft") was founded in early 1999 by Nick Bradbury. Nick is best known as the creator of the HTML editor HomeSite, which was acquired by Allaire in 1996 and is now owned by Macromedia. Until he left Allaire in February, 1999, Nick was the Director of HomeSite Development. HomeSite won numerous awards, including PC Magazine's Editor's Choice, and in 1997 was chosen as one of the best products of the year by CNET.

As for their mission, we will let their own words speak for themselves. From the Bradsoft website, we learn that their products will go through extensive beta testing involving dozens of external testers. Bradsoft will not release software until these testers say it is ready, and they make every effort to find problems. During the beta testing period of TopStyle Pro 2.5, Bradsoft gave away $1,000.00 as an incentive for people to report bugs.

If serious bugs are reported in the current version of their software, they will not make you wait (and pay!) for the next version to see them fixed. Fixing bugs in the current version will always take priority over the release of the next version. They are honest about bugs in their products. After they verify the existence of a bug, they add it to their online bug list so customers know about it.

Bradsoft builds software based on the needs of customers. They maintain an online forum to listen to feature requests, and when it comes time to work on the next version, they will allow their customers to vote for the features they want to see. This is how TopStyle Pro 2.5 was developed.

Bradsoft software will always be system-friendly. TopStyle is the perfect example of this. It installs no shared DLLs, ActiveX controls or other system files, and nothing is installed outside of the TopStyle directory. Since TopStyle is self-contained, you can install it without fear of it interfering with your system or with other applications. Now, that is just amazing. Kind of reminds me of the old DOS days, when you could depend on an application installing all its required files into its one main folder, and shared no files in the \Windows or \Windows\System folder.

Bradsoft keeps their software fast and compact. Too many products are extremely slow and bloated beyond reason, filling your hard drive and wasting system resources. TopStyle Pro 2.5 loads very quickly, so you can start using it immediately, and it's also surprisingly compact.

Now that's what I call being customer focused!

Contact Information

Nick Bradbury
Bradbury Software, LLC
203 Bellegrove Court
Franklin, Tennessee 37069
info@bradsoft.com
www.bradsoft.com

You can also order from other retailers or online vendors.