Free CSS Templates

Now when it comes to heading tags CSS is very important. They can be styled in many ways using a number of methods:

• Complete image to visitor with hidden text - Image Replacement Technique
• One Background image as whole background with normal XHTML text - as on this site.
• Repeated background with XHTML text on it - Good to reduce bandwidth.
• Background and text all in css by use of colours and border.

To do these methods it is rather simple. For methods 2, 3 and 4 all you simply do is change simple css attributes. For an <h1> tag put the following into your css and then just use <h1> Title </h1> on your page to display the code:

CSS
h1 {
width:100%;
background:url(images/heading3.jpg) no-repeat center #ededed;
color:#ffffff;
height:25px;
padding-top:10px;

padding-bottom:3px;
text-align:center;
font-size:12px;
font-weight:bold;
font-family: verdana;
}

You may wish to change attributes accordingly to fit your site design. Try playing around with the background tag, color, height and paddings. You may also wish to use a border by the use of a border tag.

The image replacement method is slightly harder. The effect is created by the use of inserting empty span classes around the text. We use the display: none; attribute to hide the text and instead show an image. This method is only needed if you are going to be using text within an image. The CSS code needed to create this would be something along the lines of:

XHTML
<h3 id=”header”>
<span>Revised Image Replacement</span>
</h3>

CSS
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}

#header span {
display: none;
}

You can then use this on a page with multiple <h3> tags and for each one use a different image. Try playing around with this base coding to create your desired effect. From my time using CSS I have found playing around and experimenting with css is the best method to learn and develop your knowledge of it.

If you need any help please contact me. If you wish to have this article on your website you must have my written approval before doing so.