Icon Styled Headings

Certainly one of the most powerful features of CSS is background or background-image. Holding interface images within one file makes for a very flexible and easily adaptable site.

One of my favorite methods is applying a background to certain heading tags within a document. Such as a left aligned bullet. Using background instead of hard-coding a bullet within each tag has obvious benefits. Don’t like the particular image you’ve used? Change one line in your CSS file and the entire site changes instantly. It also keeps the HTML code lighter by removing the need to repeat all those img tags for each heading.

As an example, I’ve just recently changed this site’s right column to render all h3s with the box icon aligned to the left of the text. The CSS goes something like this:

#right h3 {
	padding: 0 0 6px 19px;
	border-bottom: 1px dashed #ccc;
	background: url(../images/box_bullet.gif) no-repeat 0 2px;
	}

This will insure any h3 tags within the right column to show the box bullet to the let of the text. An appropriate amount of padding to the left makes this work. Also, the 0 2px portion of the background rule tells the browser to place the image 0 pixels from the left and 2 pixels from the top. This is key for lining up the image with the text just right.

The same idea can be applied to most anything — and especially nice for unordered lists (which was originally pointed out to me by Doug). Instead of using the normal list-style-image rule (which doesn’t always line the bullet image up correctly in every browser), try using background on li elements and lining up with the top/left pixel values.