More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 300

Save both site.css and mypage1.html in the same folder. Display mypage1.html in a
browser. Your page should look similar to the sample shown in Figure 7.22. The stu-
dent files contain a sample solution at Chapter7/mypage1.html.

Figure 7.22
Mixing external,
embedded, and
inline styles

Take a moment to examine the mypage1.html Web page and compare it with its source
code. The Web page picked up the yellow background from the external style sheet. The
embedded style configured the text to be the color blue, which overrides the black text
color in the external style sheet. The first paragraph in the Web page does not contain
any inline styles, so it inherits the style rules in the external and embedded style sheets.
The second paragraph contains an inline style of red text color—this setting overrides
the corresponding external and embedded styles.

FAQ

Is there a quick way to apply the same styles to more than one
XHTML tag or more than one class?

Yes, you can apply the same style rules to multiple selectors (such as XHTML elements,
classes, or ids) by listing the selectors in front of the rule. The code sample below shows the
font-size of 1em being applied to both the paragraph and line item elements.

p, li { font-size: 1em; }

CHECKPOINT 7.2
1. State an advantage of using CSS to style for print.
2. Describe how to choose whether to configure an XHTML tag, create a class, or create
an id when working with CSS.
3. List the following terms in the order that the properties and attributes are applied when
using CSS.
Inline styles
External styles
XHTML attributes
Embedded styles