Make Fancy Headings with CSS

Use Fonts, Borders, and Images to Decorate Headlines

Headlines are common on most Web pages. In fact, any text document tends to have at least one headline, so that you know the title of what you're reading. But even though HTML has 6 pre-defined headline tags, many Web pages I go to have HTML that looks something like this:

<div id="headline" class="header">This is My Page Title</div>

Then, they put styles on the headline ID and header class so that it looks exactly like they want it to look.

Generally, unless the designer is suffering from divitis, the reasoning behind this type of code is because:

"<h1> is big, bold, and ugly."

Well, sure, if you don't style it, it's big, bold, and ugly. But you're styling the div, and does that even look like a headline when it doesn't have any styles on it?

View a standard headline and an unstyled DIV headline.

Why Use Heading Tags Rather than DIVs and Styling

  1. Search engines like heading tags.
    This is the best reason to use headings, and use them in the correct order (ie. h1, then h2, then h3, etc.). Search engines give highest weighting to text included inside heading tags, because there is a semantic value to that text. In other words, by labeling your page title H1, you tell the search engine spider that that is the #1 focus of the page. H2 headings have #2 emphasis, and so on.
  2. You don't have to remember what classes you used to define your headlines.
    When you know that all your Web pages are going to have an H1 that is bold, 2em, and yellow, then you can define that once in your style sheet and be done. 6 months later, when you're adding another page, you just add an H1 tag to the top of your page, you don't have to go back to other pages to find out what style ID or class you used to define the main headline and sub-heads.
  1. They provide a strong page outline.
    Outlines make text easier to read. That's why most U.S. schools taught students to write an outline before they write the paper. When you use heading tags in an outline format, your text has a clear structure that becomes apparent very quickly. Plus, there are tools that can review the page outline to provide a synopsis, and these rely on heading tags for the outline structure.
  1. Your page will make sense even with the styles turned off.
    Not everyone can view or use style sheets (and this comes back to #1 - search engines view the content (text) of your page, not the style sheets). If you use heading tags, you're making your pages more accessible because the headlines provide information that a DIV tag would not.

Style the Text and Font of Your Headlines

The easiest way to move away from the "big, bold, and ugly" problem of heading tags is to style the text the way that you want them to look. In fact, when I'm working on a new Web site, I typically write the paragraph, h1, h2, and h3 styles first thing. I usually stick with just font family and size/weight. For example, this might be a preliminary style sheet for a new site:

body, html { margin: 0; padding: 0; }
p { font: 1em Arial, Geneva, Helvetica, sans-serif; }
h1 { font: bold 2em "Times New Roman", Times, serif; }
h2 { font: bold 1.5em "Times New Roman", Times, serif; }
h3 { font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }

You can modify the fonts of your headline or change the text style or even the text color. All of these will turn your ugly headline into something more vibrant and in-keeping with your design.

h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;

See an example of a headline with styled text.

Borders Can Dress Up Headlines

Borders are a great way to improve your headlines. And borders are easy to add. But don't forget to play with the borders - you don't need a border on each side of your headline. And you can use more than just plain boring borders.

h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
border-top: solid #e7ce00 medium;
border-bottom: dotted #e7ce00 thin;
width: 600px;

I added a top and bottom border to my sample headline to get a headline that stands out even more.

Add Background Images to Your Headlines For Even more Pizazz

Many Web sites have a header section at the top of the page that includes a headline - typically the site title and a graphic.

Most designers think of this as two separate elements, but you don't have to. If the graphic is there just to decorate the headline, then why not add it to the heading styles?

h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
background: #fff url("fancyheadline.jpg") repeat-x bottom;
padding: 0.5em 0 90px 0;
text-align: center;
margin: 0;
border-bottom: solid #e7ce00 0.25em;
color: #e7ce00;

The trick to this headline is that I know my image is 90 pixels tall. So I added padding to the bottom of the headline of 90px (padding: 0.5 0 90px 0p;). You can play with the margins, line-height, and padding to get the text of the headline to display exactly where you want it.

The dandelions make me think of summer in this headline example.

Image Replacement in Headlines

This is another popular technique for Web designers because it allows you to create a graphical headline and replace the text of the heading tag with that image. Personally, I don't feel comfortable with the image replacement techniques currently available because they all have issues with accessibility or SEO. I am willing to wait until XHTML and CSS catch up with this need. But if you're interested in learning more about image replacement for your headlines, there are a number of image replacement techniques listed on my site.