Styling headings with CSS can be actually a nice way to improve our knowledge of text and font properties. Let's say that we have four headings with different levels (from 1 to 4) and we want to stylize them. We start with the h1 element, like so:
h1 {
font: normal 2em Georgia, serif;
color: #393;
border-bottom: 1px dashed;
background: url(http://dev.css-zibaldone.com/img/note.gif) no-repeat 0 0;
padding-left: 55px;
height: 47px;
line-height: 47px;
}
In the above rule, we've specified an height that equals the line-height of the element so that our text will be vertically centered against the background image. Further, we've also added some left padding to make room for the background image. Now it's the h2 element's turn:
h2 {
font: 1.6em "Arial Narrow", Arial, sans-serif;
color: #777;
border-bottom: 6px double #999;
letter-spacing: 0.2em;
text-transform: capitalize;
}
Here we've used the letter-spacing property with an em value. That's important because when an user changes the base font dimension, all the letter spacing will scale accordingly. Time to stylize the h3 element:
h3 {
font: 1.8em Impact, sans-serif;
text-transform: uppercase;
color: #c00;
text-transform: uppercase;
letter-spacing: 0.3em;
word-spacing: 0.2em;
border-bottom: 6px solid orange;
padding-bottom: 3px;
}
h3:first-letter {
background: #c00;
color: #fff;
margin-right: 4px;
padding: 3px;
font-size: 1.2em;
}
Here we've used the :first-letter pseudo-element to create an initial cap effect. Notice that we've also specified an em value for the word-spacing property. Finally, the h4 element:
h4 {
font: 1.5em cursive;
color: #333;
border-top: 6px double #999;
border-bottom: 3px solid #999;
text-indent: -20px;
}
We've used a negative text indent to create the effect of an hanging text. However, Internet Explorer 6 doesn't support this technique very well. You can see all the examples here.