Cascading Style Sheets Tutorials and Lessons: Setting Margins

Stay at Home and Learn

Cascading Style Sheets

Adding Styles to your HTML

Computer Tutorials List

Set New Margins

Your HTML Editor comes with one more in-built Class Selector - Set New Margins. This Rule allows you to specify how far from the left you want some text to be positioned. We'll see how it works now. So create a new web page. Type in one or two paragraphs of text (they needn't be long paragraphs - two lines will do). Then do the following:

From the menu bar, click on Add
From the drop down menu, click Style > Set New Margin
The following dialogue box appears:

The Margins Dialogue Box

You have three choices on the dialogue box: Set the size of all the margins on the web page; Set only the margins that you select; and indent the first line of every paragraph.

The first two options are Either/Or. You can choose to set all the margins OR selected margins. The third option, "Indent First Line of Paragraph" can be set either by itself or with one of the other two options.

Click "Set All Margins" and you'll see this:

The only thing you need do is to type a value in the text box. This will set space around your entire page. Try a value of 5 and see what happens when you save your web page and view it in a browser.

If you click "Set Selected Margins, you'll see this:

Set Selected Margins

Type a value in a text box to set that margin. If you leave a zero in the text box, that margin won't be set.

Clicking "Indent First Line of Paragraph" will give you this:

Indent a Line

Type a value in the text box for your paragraph indent. Something like 2 or 3 is ideal.

After you click OK, the editor will place something like this code inside the HEAD section of your page (individual margins, and an indent have been set):

<HEAD>
<TITLE>Margins and Indents</TITLE>

<STYLE>
.Margins
{
Margin-Top: 5em;
Margin-Bottom: 5em;
Margin-Left: 5em;
Margin-Right: 5em;
}

P {text-indent: 3em;}

</STYLE>
</HEAD>

Notice that both a Class selector and a HTML selector have been set up. The HTML Selector is the P tag. You don't have to do anything else with the HTML selector. Once it is set up, the text in every set of <P> </P> tags will have the first line indented by a value 3em. Note the property for the first line indent - text-indent:

However, the margins properties are in a Class Selector called Margins. With this HTML Editor, you have to apply the Class Selector in order to use it. So do the following:

Highlight the text whose margins you want to set
From the menu bar, click Insert
From the drop down list, click Style Tag
When the dialogue box pops up, select Change Margins
Click OK. The Editor will surround your highlighted text with this:

<DIV CLASS = Margins>

</DIV>

When you apply the margins to a paragraph of text, it would look like this:

A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text.

Now that the HTML selector for the P tag have been set, all the first lines of paragraphs on the page will be indented like this:

And that wraps up the basics of Cascading Style Sheets. There's a fuller list of the Styles you can apply to your web pages in a help file we've produced. You can download the CHM file by clicking here:

Download the Style Sheet Reference Guide

The Properties and Values are shown, along with examples of what they look like. Experiment with them, and see how they work - Good luck.

<-- Back One Page

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses