8. Laying out a page with CSS Positioning

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 of CSS.
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. For more on positioning, as well as a short hands on exercise, see our tutorial on positioning with CSS2.

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 user's 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 which 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 stick to percentage, which we have already used for our text size.

Exercise 1

First, let's create a margin around our whole page. To do this, we'll select the body, and apply a margin property to it.
You should be getting good at this, so here are a few hints, and reminders. Construct the rule, then see whether you got it right by checking at the end of the lesson.

• the margin property is called margin

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

Test your handy work. Save the style sheet then open the page in a browser.

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 simple selector to select headings of level 1, level 2 and so on, and then a property to create the indent, using either a negative margin-left, or text-indent. Keep using the percentage unit. To create a negative value, simply place a minus sign (-) before the value (without a space). For example, -10%.

Answers at the bottom, as usual.

Text

In a well designed publication, the first line of a paragraph may be 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 rule that selects paragraphs (the P element) then applies a text-indent of 10, 20 or more percent, to taste.

Answers at the bottom of the lesson.

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 (well, something that has a similar effect).

Example Answer for Exercise 1

  BODY {margin: 10%}

Example Answer for Exercise 2

H1 {text-indent: -10%}

H2 {text-indent: -6%}

H3 {text-indent: -4%}

H4 {text-indent: -2%}

Example Answer for Exercise 3

P {text-indent: 5%}