Web Design with HTML and CSS

138

Self study

Web Design with HTML and CSS Digital Classroom

Self study

To practice styling lists, create new style rules for the defi nition list. Here are some ideas to

help you get started:

1 Make the entire defi nition list smaller than the other two lists and create an italic style

for the defi nition defi nitions <dd>.

2 Experiment with some of the other properties you learned in this lesson, such as

text-transform, letter-spacing, and so on.

3 Remember that with defi nition lists you have an extra item to work with

(the <dt> element).

Review

Questions

1 What is the em measurement when referring to font-size? What are its advantages?

2 Jennifer has defi ned the paragraph rule in her CSS the following way:

p {

font-family:Baskerville;

}

Is this the best way for her to defi ne her paragraph style? Explain your answer.

3 What is the best way to increase or decrease space between two text blocks (for example,

the space between a heading and a paragraph)?

Answers

1 The em as it applies to font-size in CSS is a relative unit of measurement. A unit of

1 em is equivalent to the default font-size of the web browser (traditionally 16 pixels).

Because em units are relative, they scale well when resized in a browser. They also allow

the designer to link elements such as paragraphs and headings to a specifi c value in the

body. This allows for easy resizing of text if needed.

2 This is not the best way for Jennifer to defi ne her paragraph style. Because fonts defi ned

in a style sheet only appear on the user’s page if they have the font installed on their

system, it is best to use a font-stack. A font-stack lists two or more fonts in the preferred

order of display (based on their availability on the user’s system). Furthermore, this font-

stack should include fonts that are generally accepted as being on most systems.

3 The best way to increase or decrease space between two text blocks is to use margins,

padding, or some combination of the two. All CSS elements are based on a box model,

and the space outside of the element is controlled by an invisible margin on all four sides.

The space inside the element is controlled by invisible padding. In the case of a paragraph

that is below a heading, you would only need to set the top or bottom values, not the

right or left values.