jsEditor - Style Sheets

Aim: To learn about the parts of the Style Sheet Dialogue.

If the dialogue is not open, then choose from the main menu:

Tools: Style Sheets

The main menu in this dialogue contains two items. The file menu is fairly straightforward with the normal Windows facilities. If you try to save a file without specifying its extension, then it will be saved as a css file (which is what the file should be).

Similarly, the Edit menu is standard, except for the Reset item. The reset item will turn all the values to default values.

The first panel contains a box which contains the name of the current file (if it has a name); otherwise, it is blank.

Below the name of the file, in the same panel are two boxes, followed by two buttons. The first edit box is labelled Selector and the next one is labelled Choose. If you open the drop-down menu below Choose, then you will get a selection of Selectors, such as H1, P, TABLE, etc. If you select one of these, then this value will be entered in the left-most box. You can write your own items in this edit box. For example, if you choose H1 from the drop-down menu, then H1 will appear in the box. You could add H2, and H3, for example, to apply all the rules to these three. You would then separate them by commas:


If you click on the add selector button then the following will appear in the editor:

H1,H2,H3 { }

So the drop-down menu will suggest selectors to be placed in the left-most box, but what is actually used by the editor is what is in this box whether entered by the drop-down menu or by you.

The last button in this panel is the Preview button. This will show the effects of the style sheet in the editor in an HTML file. This file is just a file with some of the selectors, such as headings, paragraphs, etc. If the file does not contain the selector you have entered, then, clearly, you will not see its effects! In this case, you would open the file in the jsEditor, or in your browser.

Below this panel are four tabs: Margins, Text, Images/Colours and Borders. You can click on these now. The contents will be explained in this tutorial later.

Finally, right down at the bottom above the editor are two tabs: Style Sheet and Viewer.

You have learned:

Next: The Margins Tab

Style Sheets