HTML and CSS Reference
In-Depth Information
Linking to the External Style Sheet
Four Web pages in the Oceanside Hotel and Sports Club Web site require the same
style: oceanside.html, golf.html, tennis.html, and dining.html. Linking the external style
sheet to each of these Web pages gives them the same styles for margins, paragraph text,
links, images, and tables.
To link to the external style sheet, a <link /> tag must be inserted onto each of these
four Web pages. The <link /> tag used to link an external style sheet is added within the
<head> </head> tags of the Web page HTML code. The general format of the <link /> tag is:
<link rel=”stylesheet” type=”text/css” href=”stylesch4.css” />
where rel="stylesheet" establishes that the linked document is a style sheet, type="text/
css" indicates that the CSS language is used in the text file containing the style sheet, and
href="stylesch4.css" provides the name and location (URL) of the linked style sheet. To
link a style sheet to a Web page, the <link /> tag must use "stylesheet" as the value for the
rel property and text/css as the value for the type property. The URL used as the value
for the href property varies, based on the name and location of the file used as the exter-
nal style sheet. The URL used here indicates that the external style sheet, stylesch4.css, is
located in the main or root directory of the Web site.
To Link to an External Style Sheet
After creating and saving the external style sheet, .css file, you use a <link /> tag to link the external style sheet
to any Web pages to which you want to apply the style. Notice that the link tag is one of those (like the <img /> tag)
that does not have a separate end tag (e.g., <body> and </body>). You therefore should use the / after a space and
before the > in the tag to indicate the end of the tag.
The following step illustrates how to add a link to an external style sheet using a <link /> tag:
1
•
Click the oceanside
.html tab in
Notepad++ to make
it the active window.
link to external style sheet;
because of this one line of
code, all styles defined in
stylesch4.css external style
sheet will take effect on
the Web page
•
With the oceanside
.html file open, click
the end of line 6
after the > and press
the
e n t e r
key twice.
Your insertion point
should be positioned
on line 8.
•
<link
rel=”stylesheet”
type=”text/css”
href=”stylesch4
.css” />
as the
HTML code and
then press the
e n t e r
key, as shown in
Figure 4-23.
Type
•
Click the Save button
Figure 4-23
on the Notepad++ toolbar.
