6. Text and Headings with CSS

One of the beauties of style sheets is the way they help maintain consistency. In this lesson we are going to set up a number of rules to ensure that text has a consistent appearance across our site.

Kinds of Text

Usually there are two major kinds of text in a document, the main text, and headings. There are often also other pieces of information, such as the labels for images, the list of ingredients in a cookbook, and so on.

In this lesson we will restrict ourselves to the main text. In a later lesson we are going to look at how style sheets help work with more specific kinds of information on web pages.

When designing a publication (print or web based) the appearance of text is fundamentally important. I don't have much to say about that issue (though it is a very worthy, and overlooked one) here.
I'm concerned with how we use style sheets to effect the design.

The Body and Headings

In print based publications, all of the main text of a document is in the same font, while headings either share this same font, or all share a different font. An important principle is to minimize the fuss, that is the use of different fonts for their own sake.

Our first step is to create a rule that assigns a particular font (size, etc.) to the main text of a page.
Remember from the last lesson that a rule comprises a selector, and then the properties. What will be the selector for the main text? Which elements on a page are the main text? Well, usually, the text will be contained within paragraphs. So perhaps we should create a paragraph selector. But what if some of our information is in lists? Do we also have to create a list selector? Indeed, do we have to create a selector for every possible element that will contain text on our page?

Fortunately, we can avoid that tedious, and error prone procedure, because of an important feature of web pages, and style sheets, called inheritance.

If you create a rule which selects a particular type of element, and applies properties to it, then any element that is contained inside a selected element inherits many of these properties.
In this case, if we create a rule that selects the body, and sets the font, text size and so on for the body, then any element inside that body inherits these properties, regardless of whether they are a paragraph, a list item, and so on.

So, once again, we are going to create a rule that selects the body, though this time, we are going to apply text properties to it.

Font and Size

At this stage, the most important text properties are the font, and the size of the text. These are specified by the font-family and the font-size properties.

Font

The font-family property specifies one or more fonts for an element, using the family name of the font. Each font name is separated by a comma. The browser will use the first font in the list that is installed on its computer.
I rather like the Verdana font, so I'll use that as my first choice. It is customary to also specify a common Macintosh font, a common Windows font, and lastly a generic font family name.
In this example, I've specified Helvetica, Arial and sans-serif as these fonts.

Put together, we have the following rule

BODY {
font-family: Verdana, Arial, Helvetica, sans-serif
}

Exercise 1

Now it's your turn. Create a similar rule which specifies the fonts you want apply to the text in the body of your page. If you prefer serif fonts (like Times, or Palatino) then the final generic font family should be serif.

Size

Size is specified using the font-size property. The size of text can be specified in a number of ways, including keywords like small and x-large, points, pixels and various typographical measurements like picas and ems.
Exactly how to specify sizes correctly is a fraught issue, due to the differences between various operating systems, and different browsers. This is certainly something you should investigate further as you learn more about style sheets. I really recommend you take a look at the detailed discussion of the issues associated with online text size from Tod Fahrner. If you want to really learn about using style sheets correctly, its a must read.

For these tutorials, I'm going to stick to relative values, in this case using percentages. Specifying a font-size in percent terms specifies that the size should be that percentage of the font size of the parent element.

To specify a size of say 150%, the property is

font-size: 150%

Add this to your rule for specifying the font family of your text, and you have a rule for specifying the standard text for your page.

We now have two rules with BODY selectors, the one from last lesson for setting up backgrounds, and this one. There is no problem with that. You could combine them if you wanted, but there is no need.

Time to preview again, after saving your style sheet. Has the text done what you told it? If so, well done. If not, check that syntax.

Headings

Because of inheritance, the rule we just created will apply the same style to headings, as well as paragraphs, and the other elements on a page. What we want now is to specify a different appearance for headings.
Now, it is customary for all headings in a document to have a common font, but to perhaps differ in size, or weight. So, as we have just done, we want to create two properties, one for the font, and one for, say size.

First we want to create the selector for each heading. This means that we will have several rules, one for each heading level (H1, H2 and so on.) This doesn't sound all that efficient, as we want to apply the same font to each. So that we don't have to create several different heading selectors, we can create a single group, which contains each heading level. We then give this entire group the same font.
This means that if in future we want to alter the font of headings, we need only change the style sheet once, not several times.

To create a group of selectors, you simply list the individual selectors separating each with a comma.

pop quiz

The selector group for all levels of heading (H1 through H6) is?

Exercise 2

To complete this lesson, we want to create a rule, using the above selector, and apply the same font to each heading level.
We then want to make separate rules for each heading level, assigning a different size to each level.

Answer at the end of the lesson.

Once more time to take a progress check. How's the page coming along?

Next

In this lesson we've covered a lot really. We've seen

• how the properties of an element are often inherited by the elements which it contains
• how selectors can be grouped
• the font-family and font-size properties

We've also seen how to add comments to a style sheet (did you notice?)

Next we'll look at all the wonderful things you can do with links using style sheets.

Answer to Exercise 2

Your rules should look something like this

  H1, H2, H3, H4, H5, H6 {
font-family: "Minion Web", Palatino, "Times New Roman", serif
}

/* note the use of quotations around font names of more than one word */

H1 {
font-size: 140%
}

H2 {
font-size: 130%
}

H3 {
font-size: 120%
}

H4 {
font-size: 110%
}