Brought to you by Style Master

8. Laying out a page

So far, we've been looking at the typographical aspects of style sheets, more or less. Now its time to take a look at the page layout side.
Style sheets introduce the ability to place elements anywhere on a page, but in practice, the current browsers don't support this positioning all that well.
That subject is beyond the scope of this series of lessons, but there is more to layout than just positioning elements.

Whitespace

Well designed publications look professional for a number of reasons. One of them is the use of whitespace (or neutral space). This breaks up the information on a page for legibility. Good use of neutral space (typically margins, the space between paragraphs and headings, as well as the use of indenting) makes information more readable. It draws the users eye toward the most significant information (headings), and to logically related "chunks".

In this lesson we are going to develop rules that apply these layout aspects to our page.

Margins

Typically, the text on a page is framed by a margin. On web pages, until now, we either made use of tables to create a margin (very very bad), or put up with the default margins as built into the browser.
Style sheets let us set a margin on any element. This margin is the space between the element, and the edge of the element that adjoins it. For headings and paragraphs, and other so called "block elements" this will usually be the body, but that isn't necessarily the case.
Margins can be applied to each edge individually, or to every edge at once.

You can specify the margin (which can be either positive or negative) in a number of units, but we'll use percentages, which give a fluid feel to a page. That is, when the page is resized, the margin resizes to maintain the same proportions.

The margin properties have their own editor.

To edit the margins of a statement

1. choose Margin Editor from the Properties menu

Exercise 1

First, let's create a margin around our whole page. To do this, create a new statement with an HTML element selector for the BODY, and then use the Margin Editor to set the margin around the whole body.

Let's make it a sizable amount, say 15%, as we'll create a nice effect in a minute, and we'll need a bit of margin to achieve it.

You should be able to achieve this by now. We need a new statement, then a selector for the body, and a margin of 15%.

Indenting and Outdenting

Headings

Its a common typographical effect to draw attention to headings by the use of outdenting, so that they "hang" outside the main body of text. That's what we'll do now.

There are a number of ways you could go about doing this. One would be to create a negative left margin (margin-left) for headings, perhaps outdenting less depending on the level. You could also use the text-indent property with a negative value, to outdent headings.

Exercise 2

Using either of the techniques I outlined above, create rules for several levels of heading that give outdenting to the headings on a page. You'll need a statement with an HTML selector to select Headings of level 1, level 2 and so on (which we know how to do), and then use the Margin Editor if you want to set margins, or the Text Layout Editor if you prefer to set a text indent. Create a statement for each level of heading.

Text

In a well designed publication, the first line of a paragraph may be in indented, while subsequent lines in the paragraph are flush left with the margin. This emphasizes the beginning of a logical chunk of information.
The difference between the two approaches we just saw (margin versus text-indent) is that while applying a margin to an element effectively indents all of that element, applying the text-indent property only indents the first line.

Exercise 3

To reinforce the last exercise, let's have each of our paragraphs begin with indented text. We'll use a positive, rather than negative text-indent value this time.

You should be getting the hang of this now, so we need a statement that selects paragraphs (the P element) then applies a text-indent of 5%, 10% or more to taste.

Next

There are many more page layout features to style sheets, which you can learn about from one of the more in-depth tutorials mentioned in the resources section. In this lesson we've learnt about the rudiments of working with neutral space on web pages.

Next we are going to take a look at a powerful, though a little tricky aspect of style sheets that effectively lets you create your own HTML elements (we'll, something that has a similar effect).

Answer to Exercise 1

BODY {margin-left: 15%}

Answer to Exercise 2

H1 {margin: -12%}

H2 {margin: -10%}

H3 {margin: -8%}

H4 {margin: -5%}

H5 {margin: -2%}

H6 {margin: 0%}

Answer to Exercise 3

P {text-indent: 10%}

 

The House of Style