CSS Tip:
Create Custom Headers With CSS

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout. When designers ignore header tags, they can't take advantage of the structure that header tags give the document. They also lose the boost to search engine promotion that header tags provide.

If design issues cause you to shun header tags, read on. We'll show you how to quickly customize those headers using cascading style sheets.

Structure And Promotion

One of the great things about header tags is that they have multiple uses.

Their primary purpose is to define a document's structure. Remember that HTML is a structural language. You use it to describe the document's content, not the content's style.

Think of a house under construction. There's always a wood or metal frame that goes up first. You can't tell much about the finished structure just by looking at the frame - you have to wait until the granite countertops, the carpet, and the wallpaper is installed. Well, on a Web page, the HTML code is the house's frame and the style sheet is the decorative part of the house.

Header tags define what information is the most important or most deserving of attention. H1 tags are more important than H2 tags. H3 tags are subsections of H2 tags, and so on.

They're important to search engine algorithms too. Ranking formulas often give more weight to keywords that you include in header text. Search engines assume that if header tags contain important information, the keywords inside header tags must be equally important.

Standard Headers Take Up Space

Why aren't such handy and versatile little tags used all over the Web? It's because standard header tags take up room on the page - sometimes a lot of room.

Here's an example. We used a graphic image to make sure that everyone will see the same example. This is an H1 tag with some text under it.

Notice the amount of space between the H1 element and the text? You can't change that in standard HTML and it drives designers crazy.

So they spurn header tags and instead use font attributes and bold tags to mimic headers. While they gain more layout control, they lose the benefits of the header tags.

Customize With CSS

You can use CSS to get the best of both worlds: layout control with structural and promotion benefits! All you have to do is adjust the header tag's margin and padding values.

Remember that a header tag is a block-level element. Other block-level elements include images, paragraphs, and lists.

You can adjust the space around any block-level element by changing the properties that control spacing:

• Padding: the area between text and the border.
• Border: the area between the padding and the margin.
• Margin: the area outside the border that separates one element from another element.

To change the amount of space around the header tag, you need to adjust the margin-top and margin-bottom properties. The tricky part is that 0 is the default value (the one that causes all the space!). So when you look at a regular header tag, the value of the margin is 0 - even though there's a lot of space around it.

To decrease the size of an element's margin, you have to use a negative value like this:

<style>
H1 {
font-size:24px;
           color:blue;
           margin-top:-10px;
           margin-bottom:-15px;
      }
</style>

This header will display in blue, 24-pixel type and be nestled snugly between the other page elements.

Here's part of the screen shot of a Web page. One H1 tag has no styles applied. Contrast the basic tag to the one below that has negative margins.

Browsers Like It!

Unlike many style sheet techniques, this renders fine in all recent browsers: Opera, Netscape 6.x, and Explorer. It doesn't work for Netscape 4.x browsers, but those versions have very poor CSS support and you have to deal with a lot of other Netscape CSS bugs too. Still, you don't get a broken page in Netscape 4.7, just the standard header with all that space around it.

Refer to our May 2001 newsletter story, Structure Documents With Header Tags for even more information about document structure and layout.

Looking for other tips to improve your page and promote your Web site? Search Engine Power Pack contains the valuable Page Primer tool. It analyzes your page, alert you to problems, and even give you browser-specific tips on how to make your page more search engine friendly.