HTML and CSS Reference
In-Depth Information
Linking to an External Style Sheet
You now want to add this pop-up image effect to two Web pages in the Jared Adam's
Adventure Travel Web site: waterfall.html and whale.html. Linking the external style sheet
to each of these Web pages gives you the capability to enlarge images in a pop-up format.
To link to the external style sheet, a <link> tag must be inserted into each of these
two Web pages. The <link> tag used to link an external style sheet is added within the
<head> tag of the Web page HTML. The general format of the <link> tag is:
<link rel=”stylesheet” type=”text/css” href=”stylesch7.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="stylesch7.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 external
style sheet. The URL used here indicates that the external style sheet, stylesch7.css, is
located in the main or root directory of the Web site.
To Link to an External Style Sheet
The following steps add a link to an external style sheet using a <link> tag and then saves, validates, and tests
the HTML file.
1
If necessary, click the Notepad++ button on the taskbar.
ChapterFiles folder if necessary.
With the USB drive plugged into your computer, open the waterfall.html file, navigating to the G:\Chapter07\
<!--Insert external
style sheet link
statement here --> on
line 8.
Highlight the text,
<link
rel=”stylesheet”
type=”text/css”
href=”stylesch7
.css” /> to enter
the link to the
external style sheet
(Figure 7-12).
Type
link statement
to external style
sheet stylesch7.css
Figure 7-12
 
Search WWH ::




Custom Search