HTML and CSS Reference
In-Depth Information
To Start Notepad++ and Open an HTML File
1
Start Notepad++ and, if necessary, maximize the window.
2
With the USB drive plugged into your computer, click File on the menu bar and then
click Open.
3
If necessary, navigate to the Chapter07\ChapterFiles folder on the USB drive.
4
Double-click jaredadam.html in the list of files to open the file shown in Figure 7-4.
insert external
style sheet link
starting on line 8
insert embedded
style sheet starting
on line 10
HTML code in
jaredadam.html
file at startup
three phrases displayed
on navigation bar
Figure 7-4
Setting the Body Style and Link Style,
and Adding a Drop-down Menu
Before you enter the code for the embedded style sheet, you should understand a
little more about the styles you are setting.
The code for an embedded style sheet must be inserted between a start <style> tag
and an end </style> tag, which are positioned within the head element. Within the style
tag container, Web developers generally follow the coding practice to add an HTML
start comment code <!-- and end comment code -->. The beginning and ending HTML
comment lines hide any script language that an older browser cannot interpret.
First we will review sections of the embedded CSS code that you will add and
review how each section helps to create the home page of Jared Adam's Adventure Travel.
This code will enhance the three unordered lists displayed at the top of the Web page
by creating a navigation bar (see Figure 7-3b on the previous page) with the words
Water Expeditions, Exotic Destinations, and Cycling Tours. It will also improve the
appearance of the two list items within each unordered list that are used as submenus.
Word Spacing
The CSS word-spacing
property is a good way
to add additional space
between words. You can
use any of the length
units including: inches,
centimeters, millimeters,
points, picas, ems,
x-height, and pixels.
