Creating a New Style Sheet
Getting Ready
After opening TopStyle Lite, make sure the style inspector and the preview panes are open. When you have become more familiar with performing functions, you may want to toggle them closed to increase your work space, but in the beginning, I strongly suggest you keep them open.
New File
Click the "New File" button in the tool bar. Choose the "File" button in the menu bar and "save as": Save your Cascading Style Sheet to your web folder with a descriptive name.
Selector
I like to start with the body selector, or the HTML <body> tag equivalent. This sets the stage for the rest of my selectors. That is, with the background color and image, if used visible in the preview pane, it will help choosing colors and behaviors of other elements much easier.
Click the selector button. The dialog box shown below will open. Click on the image to view full size. (It will open in a new window.)
This is the dialog box that will enable us to add each of our selectors to our stylesheets. Add only one, complete its' properties and values, then continue onto the next.
To add a selector, highlight it. You will notice it appears in the Current Selector text area at the top of the dialog box. Move directly over to the right and click the > arrow to add the current selector to the list.
Click OK. This is how you will add each selector.
Properties
With your selector added, set its properties and values. The preview pane lets you see the effect of each change before you commit to it, making it easy to build a clean, consistent style sheet one selector at a time.