Cascading Style Sheets

Redefining the <h1>,...,<h6> Tags

A Motivational Example | Redefining The Tags | Including CSS Rules | Customizing Other Tags | Customizing Tags | Classes

Now let's look at an example of how we can redefine the six standard heading tags of HTML with css. (By the way, that statement is an example where you can interpret "css" as either the abbreviation or the language. We're about to show you how these tags can be redefined using cascading style sheets by showing you particular examples in the language of cascading style sheets that will implement the definitions.) In this case we'll redefine all six tags to use a bold font, in a sans-serif face, and a custom color (rrggbb = cc3300); we'll choose six different sizes for the six different heading tags. (As far as css is concerned, we can introduce far more variety into our definitions; we can use different font faces, sizes, colors, etc. for each of <h1>,....,<h6>. Graphic designers might cringe if we did mix things up like that, but css would allow us to do so.)

Here are css instructions that will impement these new definitions:

After a little inspection, you should see that we've used the same font face (or font-family) in each case. We've also specified a bold font (with font-weight: bold) and the same color for each heading. (If the name of one of the faces were to contain one or more spaces, the name would have to be enclosed in quotes.)

We refer to the instructions that define one of these tags as a css rule. Each rule consists of a set of definitions. A definition, in turn, consists of two items: the name of a property and the value that property is assigned. These are separated by a colon.

For example, consider the rule that begins with h1. This rule "reconfigures" the <h1> tag. Here one of the definitions is font-size: 24pt, which sets the size of the font to be used for the <h1> tag. In this definition font-size is the property being defined and 24pt is the value it is defined to have.

Here are the above rules in action: Example 1. Now, let's consider where and how to add the rules so they'll "do their stuff".