jsEditor - Style Sheets

Aim: to demonstrate rules in style sheets.

The style sheets dialogue will help you create style sheets. With style sheets, you can link your pages to one file and they will all have the same style. Style sheets are more or less supported by version 4 browsers. Internet Explorer 3 had some style sheet handling capacity. When a browser cannot handle style sheets, then it just ignores them. In technical language, they degrade gracefully!

Not all of the properties, etc, are supported by all browsers. So even level 4 browsers will deal with style sheets differently. Some properties they will ignore. For example, hover links are supported only by Microsoft. 

Style sheets are a set of rules for the formatting of your pages.

To learn something about style sheets, check out the Style Sheets Tutorial. This is located at

The essential piece of information about style sheets in relation to the dialogue is that the rules have this form:

Selector Curly Brackets Property Colon Value Semicolon Curly Brackets
BODY { font-family : serif : }

Choose main menu:

Tools: Style Sheets

This brings up the style sheet editor. Click on the Margins Tab. Choose H1 as the selector, and click on the Add Selector button. The basic selector appears below in the editor:

H1 { }

Very simple so far. Just a well known HTML selector and a pair of curly brackets. Ensure the cursor is in the curly brackets.

Choose from the drop-down menu for Property:


Enter a figure, such as 10. The right-most drop down menu may say px for pixels. You can change it to % if you wish. Now click on the Add Property button. You will see the following in the editor:

H1 { margin-left:10px; }

Notice the form of the entry in the Style Sheet! It is a selector with a pair of curly brackets. Inside the bracketes is a property (margin-left) followed by a colon. Finally there is a value followed by a semi-colon. The semi-colon is intended to separate this property and value from others which might be added.

Insert File tells you how to link files to style sheets.

You have learned how to:

Next: The parts of the Style Sheet Dialogue

Style Sheets