HTML and CSS Reference
In-Depth Information
The following step adds the embedded style sheet to the Web page jaredadam.html.
1
•
Highlight the
comment <!--Insert
embedded style sheet
here -->, on line 10.
sets styles for Web
page body and all links
•
sets styles for id
named menubar
Enter the CSS code
shown in Table 7-6
(Figure 7-8).
sets styles for
unordered lists
What is an easy way
to find out what fonts
are supported on your
computer system?
One way is to review
the font names and
examples as they
appear in an applica-
tion such as in the
Font group in Micro-
soft Word. You may
want to try different
fonts and sizes in an
application such as
Word to see what they
look like. You can save a document as a Web page
in Word and view it in the browser as well.
sets styles for
hover function
sets styles for class
named whitepipe
sets styles for class
named box to
position the image
sets styles for class
named posit to
position the image
Figure 7-8
Why would I want to use the “hover” technique for links?
Using hover adds interactivity and in this case helps to highlight
the menu and submenu structure for the user.
I
Experiment
Remove the position: absolute property and value in line 20, save the file, and then open it
•
in your browser. Notice how this change affects the phrases, Exotic Destinations and Cycling
Tours, when you hover over the phrase, Water Expeditions. Put the statement back in.
To Save, Validate, and View an HTML File
Font Families
You also can specify font-
weight using numerical
values from 100 to 900.
Normal text that is not
bold has a value of 400.
Each larger number is
at least as bold as the
one above it, and 900
is the boldest option of
the font. The browser
interprets each value as it
displays the Web page.
After you have added the embedded style sheet to the jaredadam.html Web page,
you should save the HTML file and view the Web page to review the style changes.
1
With the USB drive plugged into your computer, click File on the menu bar and then
click Save.
2
Validate the Web page using the W3C validation service.
3
Open the jaredadam.html file in the Web browser to show the completed navigation bar,
as shown at the top of the jaredadam.html Web page (Figure 7-9 on the next page).
