jsEditor - Style Sheets: The Borders Tab

Aim: To learn about the Borders Tab of the Style Sheet Dialogue.

The borders tab is unlike the others in that you need to fill in every box before adding the declarations. To have a border, it requires a width, for example. So, if you entering a border, you need to say what the width is! And similarly for the other properties. So in this case, you need to do it all in one go.

Choose the borders tab.

For the border drop-down list, you have a selection of border positions. The plain 'border' option puts a border on every side. border-right, for example, puts a border on the right only (although other properties may be used, so you could have a border on 3 sides, for example).

Choose a selector. I chose P. And add it to the style sheet. Then choose a border. I chose 'border' to put a border around the whole paragraph.

Now choose a style. I chose double.

And now, choose a colour. I chose 'red'.

And finally, choose a size (with units). I chose 3px. Now You can click on the add button. I saw this in the style sheet:

P { border: double #FF0000 3px; }

View the results. I got red, double, borders around my paragraphs.

Now, delete the rule in the style sheet, so you have the P Selector and its curly brackets. Now, using the lower drop-down menu (which currently says number) and I chose thick as a border thickness. The units in the drop-down menu now disappear.

Add the new rule, and view the results in the Viewer.

In the editor, I got:

P { border: double #FF0000 thick; }

Do remember, that when you make changes to use the reset button and to delete the old stuff first.



You have learned:

Next: The List Tab

Style Sheets