NeopetsGuide

Wondering how to get great title bars like some sites have? Well they use css headers. Naturally, just like when you use bold tags, there are header tags. So just as you can make your text and links, you can alter the way your headers appear.

Headers Without Style

<h1>, <h2>, etc. These will just change the size. You just use them like this:

<br /> <h1>Header 1 Title</h1> <h2>Header 2 Title</h2> <p>They are just plain ugly old black fonts. BORING. Well we can easily add some style to them in our style sheet with css.

Basic Header Alterations

You can move your headers around by using a few different things to it. To center, we just use this:

<center><br /> <h1>A Title Here!</h1> <p></center> or to move it to the left or right just stick it in a div: <div align="right"> <h1>A Wicked Header</h1> </div> <p>

Style-ize 'em

Notice the headers on this site? I've added some style. Let's see.. The top one with the page title is a header 1, the one above this is a header 2 and this is a header 3:

Header 3

Pretty spiffy eh? Well let's work on adding the style now.

Headers in Our Style

Let's look at the code for a header. Now this is for a header one but just change the 1 to a different header and it will modify the way it looks when you use the <h1> or <h2>, etc codes.

h1 {
font-family : arial;
font-size : 12px;
background-color : #000000;
color : #FFFFFF;
letter-spacing : 2;
text-align : left;
text-transform : lowercase;

padding: 4px;
border-right: 20px #FFFFFF solid;
}

Afterword

I've added lots of things to the header code above. In order to work these out you should know the basics of css and the different alterations of css. If you have any more questions, refer to the other guides, and then contact me.