Independent Articles and Advice
Login | Register
Finance | Life | Recreation | Technology | Travel | Shopping | Odds & Ends
Top Writers | Write For Us


PRINT |  FULL TEXT PAGES:  1 2 3 4 5
Printer-Friendly Web Pages Made Easy 
 
by Scott Nesbitt June 10, 2005

Headings, Headings

HTML supports six levels of heading, from <h1< (the largest) to <h6< (the smallest). It's rare for anyone to use any heading smaller than <h4>

Let's start by styling <h1>which is usually used for the main title of a Web page:

h1 {margin-left: -25px; font-family: sans-serif}

Again, the font used is sans-serif -- I think that heading in a serif font looks a bit too staid whether in print or on the Web.

Notice, though, that I set the margin-left property to -25 pixels. This creates with effect that I alluded to earlier. All headings that are tagged as <h1>will be 25 pixels to the left of the body text. This effect is called an outdent.

In many structured documents, not all headings are outdented to the same degree. A first level heading has the largest outdent, and all other headings move to the right. Using that as a guideline, let's style <h2>like this:

h2 {margin-left: -15px; font-family: sans-serif}

The outdent for <h2>is five pixels smaller than for <h1>.The font is, you guessed it, sans-serif.

Now, for <h3<. Some people like to have <h3>outdented. Not me. I like it in line with body text. So, here's how to create that effect:

h3 {font-family: sans-serif}

Notice that I didn't include a margin-left property with this style definition. It's not needed.

PREV PAGE 1 2 3 4 5 NEXT PAGE

 




Home  |  Write For Us  |  FAQ  |  Copyright Policy  |  Disclaimer  |  Link to Us  |  About  |  Contact

© 2005 GoogoBits.com. All Rights Reserved.