Tutorials

Decorating your headers with borders

Follow this tutorial if you want to learn how to add borders to your headers.

Alright, this is a basic header code:
h1 { color : blue; font-size : 12pt; text-background-color: silver; line-height : 20pt; font-family : Arial; }

to use the header code on your webpages, just write <h1>text here</h1> Now, If you want to add a border line above, underneath, or to the sides of your header…just add:
border-right: 5px solid yellow;

5px is how thick you want your border to be. Make the number higher if you want it larger…or lower it if you want it smaller.

Solid is one out of three options you may add. There are:
Solid - a regular line
Dotted - a dotted line
Dashed - a dashed line

Pretty self explanatory, right? You may substitute any of the options above into your code for a different border look.

Yellow is just the color I chose. You, of course, can change that to what ever you wish.

border-right just indicates whether you want the border to appear to the right of your header, or elsewhere. You may substitute right, with either left, top, or bottom.


Have fun experimenting around with this code! Hopefully this tutorial has helped you out. If you need further assistance, or simply have a question, feel free to email me.

All content copyright 2007 behindherheart.com. All rights reserved.

Disclaimer Owner F.A.Q Credit My Host