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.
Usually there are two major kinds of text in a document, the main text, and headings. There are then often 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.
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 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 out
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.
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.
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.
To specify the fonts to be used in a rule
1. open the
from the menu2.at the bottom of the text style editor the Text Style Editor is where the font-family property is edited.
The popup menu lists several groups of fonts (Font Families, standard Macintosh, standard Windows, common Web). The relevant list of fonts appears in below it when one of these groups is chosen).
To add a font to the list of fonts chosen for an statement
1. choose the group from the popup menu
2a. double click the entry in the list of fonts or
2b. click the entry in the list of fonts and click
To remove a font from the list of fonts chosen for an statement
1. click the entry for the font in the list of fonts for the statement
2. click
Now its 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.
The answer is at the end of the lesson.
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.
Esteemed figures suggest relative units, such as percentages, and ems as the
best unit. This is certainly something you should investigate further as you
learn more about style sheets. A very valuable overview of typographical units
can be found at http://css.nu/articles/typograph1-en.html
Text size is one of the text style properties, so the property is also edited using the text style editor. The text size editor should be easily located in this window.
To set a value in a property editor
1. choose the type of value in the popup menu at the right
2. enter the value in the text field
We've added this to your rule for specifying the font family of your text, and now we have your rule for specifying the standard text for your page.
There are now 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.
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
1. from the
menu, choose2. in the dialog box that opens, choose Selector Group from the popup menu, then click
3. the selector group editor opens
4. to add a selector to the list of those grouped, find it in the list on the left hand side, then click to select it, and click
5. to remove a selector from the list of those chosen for the group, select it, and click
6. click
Any properties added to this statement will apply to any element in the list.
To complete this lesson, we want to create a rule, with a selector that groups
all of the headings (H1
to H6
) 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?
In this lesson we've covered a lot really. We've seen
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.
BODY {font-family: Verdana, Arial, Helvetica, sans-serif}
Your group rule should look something like this
H1, H2, H3, H4, H5, H6 {
font-family: "Minion Web", Palatino, "Times New Roman", serif
}
and the individual headings
H1 {
font-size: 130%
}