jsEditor - Style Sheets: The Margins Tab

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

If the Margins Tab is not selected, then select it now.

You will see two boxes labelled Property and Value, a drop-down box with the default px for pixels value and a button - Add Property.

First add a selector to the editor. I chose P and then I clicked the Add Selector button. I got:

P { }

Nice and simple. A P (for paragraph, of course) and two curly brackets. This will apply to all the text which is enclosed in paragraph tags, in the documents linked to this sheet.

So far we have a Selector (P), but nothing for it to do.

In the Property box, I chose margin. margin-left, for example, will put a margin on the left. margin will put a margin around the whole text. You can give the Selector, in this case, the paragraph, a margin on any side you wish, by selecting the appropriate property.

The stuff in the editor looks like this:

P { margin:10%; }

Preview the standard file. The paragraphs now look funny with their border all around and are more indented than the blockquotes!

I deleted this rule. I then entered the Paragraph as a new selector and chose margin-right 50%. The editor looks like this:

P { margin-right:50%; }

When I click on the preview tab, I get paragraphs that take up 50% of the page.

Finally, delete this rule. Choose BODY from the Selector at the top of the dialogue, and click Add Selector.

Ensure the cursor is in the curly brackets and then choose 'margin', 10% and click the Add Property button.

I got this in the editor:

BODY { margin:10%; }

Click on the Viewer tab. Now we get a nice margin around the whole of the document. Also in this drop-down menu, there are similar properties for padding. Why not experiment with them?


You have learned:

Next: The Text Tab

Style Sheets