HTML and CSS Reference
In-Depth Information
Table 7-2 Files Used for the Chapter 7 Project (continued)
Purpose and Display
Specifics at Startup
File Name
Changes Made in Chapter 7
whale.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 over the smaller image
stylesch7.css
• Nothing at startup; created
from scratch
• Create an external style sheet
• Save as a .css file
printpage.css
• Nothing at startup; created
from scratch
• Create an external style sheet
• Save as a .css file
ch7sample.html
• Dummy Web page that
contains initial HTML code
and link statement to external
style sheet
• Nothing is done to this Web page in
the chapter; you can use it as a starting
point for additional Web pages
In this project, you will add different types of style sheets to the Web pages in the
Jared Adam's Adventure Travel Web site. To add the style sheets, you will make changes
to three of the Web pages stored in the Chapter07/ChapterFiles folder of the Data Files
for Students: jaredadam.html, waterfall.html, and whale.html. You will also create two
external style sheet files, stylesch7.css and printpage.css. In addition to the files listed in
Table 7-2, all image files needed for the chapter project are stored in the Data Files for
Students. See the inside back cover of this topic for instructions on downloading the
Data Files for Students, or contact your instructor for information about accessing the
required files.
Plan
Ahead
Creating an Embedded Style Sheet.
You use an embedded style sheet if you want to set the styles within a Web page. In the case
of this Web site, you want to create a navigation bar with a drop-down menu on the home
page only. You design that menu on the home page by creating an embedded style sheet.
Determine which Web pages vary enough that an embedded style sheet makes
sense. You may have only one or even just a few Web pages in a Web site that will
vary slightly from all other pages. In this case, an embedded style sheet makes sense. If
there are styles that are to be repeated in that one Web page (or in a few pages), you
would be better off using an embedded style sheet rather than a series of inline styles.
For instance, if you want all paragraphs of text to have the same style within one Web
page, then it makes more sense to embed that style rather than add the style to each
paragraph tag within the Web page.
Copy an embedded style sheet into other Web pages.
• If you have a few Web pages
that should have the same style, insert the embedded sheet in one Web page, save,
validate, and test it. Once you have verified that it works as you intend, then you can
copy/paste the embedded style sheet into the other Web pages.
Change to an external style sheet when necessary.
• If you ind that the style from the
embedded style sheet is used on more Web pages as time goes on, you should create
an external style sheet and link it into all Web pages in which you had previously
inserted an embedded style sheet. For instance, if you decide that you want to have
the drop-down menu on all Web pages in the Web site, you should move the code
in the embedded style sheet to an external style sheet and link that external style
sheet into all Web pages in the Web site.
Search WWH ::




Custom Search