The next pages cover specific attributes you can change using style sheets. These are margins, fonts and text, and backgrounds.

CSS Tutorial: Margins

Style sheets allow you to specify margins. What a nice addition to web pages. No longer will text be shoved right up against the sides of the browser, and no more extraneous tables to work around this. Well maybe not all table workarounds will disapper, but they can be much simpler.

With margins you can format the text within tables or any HTML element. Also you can indent single lines, whole paragraphs, image spacing, and more.

There are 5 margin properties, well really 4 and 1 shorthand. These properties are:

margin-top

margin-bottom

margin-right

margin-left

margin (shorthand)

The values they accept are lengths, or percentages. The lengths are measured in pixels(px), inches(in), centimeters(cm), millimeters(mm), font point (pt), font height (em), and picas (pc).

The percentages are relative to the object, which could be the whole page, or 'inside' of another object, like a table. Negative values are accepted, but be careful when using them.

Examples

This will define the above margins for everything in paragraph tags. click here for an example Play with resizing your browser window, notice the margins stay the same width.

The margin shorthand notation could have been used in the above and would have looked like this:

Some even nicer short cuts, if using similar values, can be used. To set a 0.5in margin on each side you could use:

If you have the same top and bottom margins, and the same right and left margins you can use the following shorthand notation:

Here is an example to indent text