CSS Formatting

Category: CSS
Reviewed by: swnesbitt   
Reviewed on: Jun 03 2006
» Discuss this topic ( Posts)

Cascading Style Sheets (CSS) are a great way to change the look and feel of your Web site. But CSS isn't just useful for laying out Web sites and their individual pages. You can use CSS to format the elements on a Web page, right down to the level of a paragraph or even a word.

This article looks at a number of CSS formatting techniques that can add a little extra to the look and feel of your Web pages. While simple, some of these techniques are practically impossible to duplicate in plain HTML or XHTML. At least not without having to resort to using graphics, tables, and Javascript.

And in case you're wondering, I've been using these techniques for several years now on Web pages that I've built, in online documentation, and even in HTML-based help systems. The techniques in this article added some much-needed spice to my HTML and XHTML projects.

Playing with Margins

Some people are surprised when I compare Web pages to traditional printed pages. Like the kind in a book or a magazine. While the delivery mechanism is different, the goal of both a Web page and a printed page is the same: to present information. Part of that presentation involves how words and images are placed on a page. That's where margins come in.

Margins can make a page more visually appealing by adding white space around your text and graphics. Using CSS you can set margins so that your pages won't look like huge blocks of words but can more closely resemble traditional printed pages.

We're going to look at how to:

  • Set left and right margins
  • Indenting and outdenting text and headings

Left and Right Margins

One of the things on the Web that I can't stand to see is pages with text that lies up against the left and right sides of the screen. Not only is it unattractive, it's hard on the eyes while reading. It's easy to get rid of this problem by using CSS to change the margins.

How? Just use the margin-left and margin-right properties. As you can guess from the names of these properties, they add padding to the left and right margins. To use these properties, create a style for your page body in a CSS file, like this:

[code] body {margin-left: 45px;
margin-right: 45px;
} [/code]

This style definition adds 45 pixels of space to the left and right margins, as shown below.

Left and right margins

You should experiment with margins of different sizes. I've found that a 15 pixel margin is the bare minimum -- it's not too much but sometimes it's not enough, either. On the other hand, I try not to add more than 60 pixel margins on either side. Remember that you want good balance between your content and the white space. You don't want white space overwhelming content.

But why use pixels as the unit of measure? While measures like inches, centimeters, or points are valid in CSS I've been told by a number of MacOS users that using inches and points can cause most page elements (not just margins) to distort or be illegible. It happens regardless of the browser being used. On the other hand, using pixels seems to be the option that works the best across all browsers and operating systems.

Note: You can also set the top and bottom margins of your Web pages using the margin-top and margin-bottom properties.

Indenting and Outdenting

You'll probably notice that most Web pages are blocky -- both text and headings are aligned at the left margin. And there's nothing wrong with that. But doesn't mean you can't do something a bit different. That something is to outdent the heading.

The first step in outdenting a heading is to indent body text. To to this, add the following style definition to your CSS file:

[code] body {margin-left: 35px} [/code]

The margin-left: 35px property indents the all elements on the Web page 35 pixels from the left margin. To create the outdent of 25 pixels for an element, add the following to your CSS file:

[code] h1 {margin-left: -25px} [/code]

The margin-left: -25px property moves the [code]

[/code] element 25 pixels to the left of the left margin, as shown below:.

A sample of an outdent

You can give all of your headings the same amount of outdent, or you can give an

the largest outdent, and have all other headings move progressively to the right as shown below:

Another sample of an outdent