Text Decoration With CSS

You've probably decorated your home during the holidays, or perhaps for some major party (Senior Prom, anyone?), and so you know what a major pain such projects can be. Unwrapping trinkets, stringing lights or crepe paper, cleaning... it's enough to keep you from ever doing it again.

Fortunately, decorating text isn't nearly as stressful. In fact, it's really quite easy, and can be more useful than a handful of cheap paper confetti. Come to think of it, so are most things, but never mind that now. Let's look at how we can decorate text, and ways to use that in Web page design.

Decoration Station

The property in question is text-decoration. Its default value is none, which makes sense, since the norm for most text is to be without any special decoration.

The first kind of decoration to be examined is underline. As you might expect, this will cause text to be underlined. If the last three words in the previous sentence are underlined, then congratulations-- your browser supports text-decoration! (Well, that much of it, anyway.) Underlining has, historically, been rarely used on the Web, unless you count link underlining.

Previous to CSS1, the only way to accomplish underlining was to use the underline tag (<U>), which was sporadically supported by major Web browsers, and keeps drifting in and out of the HTML specification. As of HTML 4.0, the underline tag has been deprecated, which means it's being phased out of the specification altogether. Why? Because CSS1 allows authors to underline anything they like, without the need for a presentational tag.

So let's say that we have a paper in which we want all level-4 headings to be underlined. The declaration is straightforward enough:

H4 {text-decoration: underline;}

This is another H4

And there you have it-- underlined level-4 headings!

There is a counterpart to underlining, and that's over lining. In this case, a line is drawn above the text, instead of below it. Why was this included in the specification? Well, that's a good question, and I don't really have an answer, but you can do it. For example:

H4 {text-decoration: overlie;}

This is an H4

Okay, so maybe it isn't the most common typographical effect ever, but it can be somewhat interesting. You might use it in a fashion similar to horizontal rules, as sort of a between-sections break. Even more interesting, you could use it in combination with underlining, like this:

H4 {text-decoration: underline overlie;}

This is yet another H4

This demonstrates one of the biggest points about text-decoration: the fact that you can use any, or all, of its values in any combination, and list them in any order. Well, okay, almost all of its values. If you use none, then that's the only value you can use. Otherwise, use 'em all if you want.

Speaking of which, we should look at the other two values of text-decoration...

Blink and You Might Strike Out

Navigator fans rejoice: the most famous Netscape-invented tag ever has made its way into the CSS1 specification. That's right, one of the values of text-decoration is blink. It has exactly the same effect as the <BLINK> tag, which is to say that Internet Explorer doesn't support this value of text-decoration. According the specification, it isn't required to do so; while browsers have to recognize the value, they don't have to actually blink anything.

Therefore, only CSS1-aware versions of Netscape Navigator are going to see the following effect:

H4 {text-decoration: blink;}

This might be a blinkin' H4

Lovely, isn't it?

All right, this brings us up to the final value of text-decoration, which is line-through. Legal librarians everywhere will rejoice at this one, because it enables the strikethrough effect so beloved of legislators everywhere. For those who aren't familiar with strikethrough, it simple draws a line right through the middle of the text, like this:

H4 {text-decoration: line-through;}

This is a stricken H4

Legislators use this to show where laws have been modified, printing the replaced portions of the law with a strikethrough line such as you see above. Most of you probably won't need to use this effect, except maybe when writing humorous pieces.

Using Decorations in Page Design

As we've already seen, you can use underlining to add emphasis to things like certain heading levels. You might also decide that emphasized text should be underlined, in addition to whatever other effects it has it a given browser. So you could try this:

EM {text-decoration: underline;}

The above rule will give the <EM> tag extra emphasis.

Another way to employ text-decoration is to influence the way anchors are displayed. As you're probably aware, most people have their browsers set to underline all hyperlinks, but others do not. There really wasn't any way to do anything about this before CSS1. Now, however, you can at least try to impose your particular hyperlink aesthetic upon the reader, perhaps like this:

A {text-decoration: none;}

The above rule will have the effect of turning off link underlining in CSS1-aware browsers. Conversely, declaring the value underline would turn on link underlining, even for those who turned it off in their browser preferences. As to whether either of these is a good idea is a matter of heated debate. As always, it's up to you to decide whether a given use of stylesheets is a good idea or not.

Conclusion

As we've seen, text-decoration can be used to jazz up your text just a bit. There are other ways to mess around with the appearance of text, of course, and I hope to discuss those in a future article (or three). Next time, however, I'm going to be looking at color the CSS1 way, so join me then!