How To Style Heading Tags
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:
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:
<h3 id="header">
<span>Revised Image Replacement</span>
</h3>
#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.
Like this post?
If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.
Want to learn CSS fast?
Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.
