Shorthand Rules

Text may be decorated with lines. The lines have a location, color, and style, and accordingly, there are three properties to set: text-decoration-line, text-decoration-color, and text-decoration-style. Here a solid orange underline is added to the heading:

html
css
preview

The location can be set to underline, overline, or line-through. Try out these different values. Multiple lines can be drawn using a space-separated list.

Be careful using underline. The convention of the web is that underlined text is a link. If your content is not a link, you should probably not underline it.

The style can be set to solid, dashed, dotted, double, or wavy. Try out these different values.

These properties are mentioned not because they are important to the presentation of your content. Rather, they are the first family of related properties that you have seen. In many situations where multiple properties must be set to determine a style, CSS defines a shorthand rule that lets you set them all at once, like this:

html
css
preview

The property name is stripped to the common prefix text-decoration. When there is no ambiguity amongst the combined values, the values in a shorthand rule may appear in any order, as is the case here.

You will see many more shorthand rules as you progress.