HTML and CSS Reference
In-Depth Information
(continued)
Plan
Ahead
6. Test all Web pages within the Web site. An important part of Web development is
testing to assure that you are following the coding standards discussed earlier in the
topic. In this topic, you use the World Wide Web Consortium (W3C) validator that allows
you to test your Web page and clearly explains any errors you have. As defined earlier
in the topic, one validator is used for all .html iles, and another is used for all .css iles.
In addition to the validation process, you should test the Web pages themselves in the
browser. When testing, you should also check all content for accuracy and ensure that all
links work as intended.
When necessary, more specific details concerning the above guidelines are presented at
appropriate points in the chapter. The chapter also will identify the actions performed and
decisions made regarding these guidelines during the creation of the Web page shown in
Figure 7-1 on page HTML 325.
Using Style Sheets
CSS
The World Wide Web
Consortium (W3C) has a
wealth of information
about Cascading Style
Sheets (CSS). You can find
out what is new with
CSS, access CSS testing
suites, and find links to
CSS authoring tools from
this Web site. For more
information, visit the
W3C Web site and search
for CSS.
As you learned in earlier chapters, although HTML allows Web developers to make
changes to the structure, design, and content of a Web page, HTML is limited in its
ability to define the appearance, or style, across one or more Web pages. As a result,
Cascading Style Sheets (CSS) were created. With CSS, you can establish a standard
look for all Web pages in a Web site. Using CSS, you avoid the tedious steps of adding
repetitive codes to format the same types of information. For example, instead of
making all paragraphs of text 10pt Verdana in individual <p> tags, you can define that
style in an external style sheet (.css file) and link that external file to all Web pages.
CSS is also perfect for formatting Web pages, but without using HTML table tags.
As mentioned earlier in the topic, tables should not be used to format Web pages;
CSS should be used instead.
A style is a rule that defines the appearance of an element on a Web page, and a
style sheet is a series of rules that defines the style for a Web page or an entire Web site.
There are three types of CSS: inline, embedded (or internal), and external (or linked). In
previous chapter projects, you have used all three types to alter the appearance of a Web
page or pages by changing characteristics such as font-family, font-size, margins, and
link specifications. In this chapter, you will learn to use more advanced CSS features to
add functionality to Web pages.
First, an embedded style sheet is used to add a drop-down menu to the home page
of the Web site (Figure 7-2a on the next page). You use an embedded style sheet in this
case because the menu appears only on the home page. An external style sheet (Figure
7-2b) is created for printing and is linked into the home page, jaredadam.html. With these
style sheets added, the Jared Adam's Adventure Travel home page is attractive, polished,
and professional looking (Figure 7-2c). An external style sheet is then created to add a
pop-up effect in the other Web pages in the Web site (Figure 7-2d). You use an external
style sheet because the style will be the same across several Web pages. That external style
sheet is linked into the waterfall exploring and whale watching pages to give the pop-up
effect shown in Figure 7-2e.
Search WWH ::




Custom Search