HTML and CSS Reference
In-Depth Information
Style Sheet Precedence Review
In Chapter 2, you learned how to insert an inline style. The project in this chapter
uses an inline style and also introduces you to embedded style sheets. You will learn about
the third and final form of style, external style sheets, in Chapter 4. It will be helpful at
this point to review the information from Chapter 2 on the precedence of styles (see
Table 2-6 on page HTML 53). An inline style is used to control the style within an indi-
vidual HTML tag and takes precedence over both embedded and external style sheets. An
embedded sheet is used to change the style of an element over one Web page, but over-
rides or takes precedence over any styles defined in an external style sheet. An external
style sheet is a separate document with a .css extension that is used to define styles for
multiple pages in a Web site.
Because styles have different levels of precedence, all three types of styles can
be used on a single Web page. For example, in this part of the chapter, you define
body, anchor, and heading styles with embedded style sheets that are used for both the
underwatertours.html file and the samplephotos.html file. You also insert a few inline
styles on each Web page. Because of the precedence rules, the inline styles take prece-
dence over the embedded style sheets. For instance, if you use an embedded style sheet to
make all paragraphs Garamond font-family in normal text type and size 12, you can over-
ride that font-family, style, and size for a specific paragraph with an inline style within that
paragraph's <p> tag. Maybe there is a paragraph that you want to highlight, so you make
it bold with an inline style. Or maybe there is a paragraph that you want to downplay, and
you make it smaller and italic with an inline style. It is important to determine how and
when to use the various styles in the design phase of Web development.
Types of Styles
Remember that an inline
style changes the style of
an individual element;
an embedded style sheet
changes the style of an
entire Web page; and
an external style sheet
changes the style in
multiple Web pages in the
same Web site. If you want
to change the style of a
single element, use
an inline style.
Plan
Ahead
Identify which level of style or style sheet to use.
Because of precedence rules, it is generally better to look at the broadest level style first.
In this chapter project, you use inline and embedded style sheets, with embedded being the
broader level. In other words, an embedded style sheet is used for the entire Web page, and
an inline style is used in a particular HTML tag. In Chapter 4, you will add an external style
sheet (the broadest level) to your chapter project.
Identify what styles need to be different than the standards used across the Web site
•
.
Sometimes you need to vary a style in order to call attention to the content or pull
attention away from it. Many Web sites have a legal statement on the bottom of the
home page. That is not necessarily something that needs to be the same font-size as
the rest of the content on that Web page. So you may choose a smaller font-size and
maybe make the text italic for that content. Two types of style sheets are used for
styles that are different across a Web site: embedded and inline.
Use embedded style sheets to affect a single Web page
•
. This type of style is good to
use if you want the style to affect just one (or a few) Web pages, and not all pages
across the Web site.
Use inline styles for individual styles
•
. If you want to change the style of one or a few
elements of one Web page, then using inline styles is the most appropriate. If a style
is intended for most (or all) of the Web page, consider using an embedded or external
style sheet.
Using Embedded Style Sheets
An embedded style sheet is used to control the style of a single Web page. To add
an embedded style sheet to a Web page, you insert a start <style> tag at the top of the
Web page within the <head> </head> tags that define the header section. After adding the
desired style statements, you end the embedded style sheet by adding an end </style> tag.
