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.
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.
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
from the menuFirst, 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%.
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.
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.
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.
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.
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).
BODY {margin-left: 15%}
H1 {margin: -12%}
H2 {margin: -10%}
H3 {margin: -8%}
H4 {margin: -5%}
H5 {margin: -2%}
H6 {margin: 0%}
P {text-indent: 10%}