HTML and CSS Reference
In-Depth Information
Style Sheet Precedence Review
As discussed in previous chapters, each style sheet type has a different level
of precedence or priority in relationship to the others. Table 7-1 reviews style sheet
precedence.
Table 7-1 Style Sheet Precedence
Type
Level and Precedence
Inline
• Changes the style within an individual HTML tag
• Overrides embedded and external style sheets
Embedded
• Changes the style of one Web page
• Overrides external style sheets
External
• Changes the style of multiple pages in a Web site
Plan
Ahead
Identify what style sheets to use.
The first step to consider when using style sheets is to lay out a plan that takes style sheet
precedence into account. This project uses only embedded and external style sheets.
Use external style sheets for styles that you want across the Web site.
•
As mentioned,
the greatest benefit of CSS is the ability to identify a style across a Web site. For Web
pages in which you want a common look, use external style sheets.
Use embedded style sheets for single Web page styles.
• This type of style sheet is good
to use if you want the style to just affect one (or a few) Web pages, and not all pages
across the Web site.
Use inline style sheets for individual styles.
• If you want to change the style of one or
a few sections of one Web page, then using inline style sheets is the most appropriate.
If the style is intended for most (or all) of the Web pages, you may want to switch to
embedded or external style sheets.
Adding Style Sheets to the Jared Adam's
Adventure Travel Site
The Jared Adam's Adventure Travel Web site for this chapter consists of six files (excluding
image files), as shown in Table 7-2. The first Web page, jaredadam.html, is the home page
of the Web site. The jaredadam.html file contains the navigation bar at the top of the Web
page. It also contains the company logo and the home page content.
Table 7-2 Files Used for the Chapter 7 Project
Purpose and Display
Specifics at Startup
File Name
Changes Made in Chapter 7
jaredadam.html
• Home page of the Web site
• Contains an unordered list of
navigation options, an image logo,
and a paragraph of text
• Add an embedded style sheet that
creates a drop-down menu
• Position paragraph of text and image by
defining styles for margins, background
color, and padding
waterfall.html
• Contains the HTML tags, content,
and images that are needed for the
pop-up effect
• Add a link to an external style sheet that
displays a large image when a user
hovers the mouse over a smaller version
of the image
