Using TopStyle Lite (CSS Editor)

TopStyle Lite is a free, easy to use, but very powerful CSS editor that makes creating advanced Cascading style sheets easy.

Open TopStyle light and you will see two main panes:- The left hand pane will contain the style sheet code as you create it, and the right hand pane displays the style selectors and style properties. This is where you create and edit the styles themselves.

A preview pane may also be seen at the bottom. It can be turned on by clicking view and then selecting preview. It also appears when you are editing.

The first task is to set the style sheet level/compatibility in the style inspector. In the example below I have set it to CSS1. Many other levels are possible just click the down arrow on the selector to view them.

To illustrate how you use the program I am going to go through the process of creating a style sheet that controls the Body HTML tag.

Click the new selector icon (shown below in red circle)

A selector window appears. Highlight the body tag and it appears in the current selector box. Click the arrow to confirm selection.

The body tag now appears in the selectors window.

Press OK and and you are returned to the main window. You will see the body selector in both left and right panes. You are now ready to set the properties for the body tag.

Click the body tag in the right hand window and you will see that it becomes highlighted in the left hand pane.

Now switch to properties by clicking the property tab in the bottom left corner of the right pane.

The first thing we will do is to give the page a background colour. Select background colour and select the colour of you choice (I've chosen silver). If the colour you want isn't in the drop down list click choose colour to activate the colour picker.

You should now see the CSS code in the left pane and the preview pane at the bottom show the silver background.

We will now set the page font. Scroll down until you see the font property. Select font-family and choose font. The font picker appears. Now activate the fonts you want. In this example I will use Verdana, Arial, sans serif.

Click Ok when finished and you will see the CSS code in the left hand pane enclosed in the body tag.

To finish I have set the page margins and padding. The style sheet is shown below.

All we now need to do is to save the sheet and then link it to our pages.

Related Articles and resources:

• Starting Cascading Style sheets  (CSS)
• FrontPage Embedded Style Sheets
• FrontPage External Style Sheets