HTML and CSS Reference
In-Depth Information
Applying an External Style Sheet
Style sheets are written in the
Cascading Style Sheet (CSS)
language. Like HTML fi les,
CSS fi les are text fi les and can be created and edited using a simple text editor. A style
sheet fi le has the fi le extension
.css
, which distinguishes it from an HTML fi le. Dave
already has a style sheet for his Web page stored in the fi le
jpsstyles.css
.
Linking to an External Style Sheet
To apply an external style sheet to a Web page, you create a link within the document
head to the style sheet fi le using the
link
element
<link href=”
file
” rel=”stylesheet” type=”text/css” />
where
file
is the fi lename and location of the style sheet fi le. When a browser loads the
page, it substitutes the style from the external style sheet fi le for its own internal style sheet.
See how the format and layout of Dave's sample page change when the page is linked
to the
jpsstyles.css
fi le.
To apply Dave's external style sheet:
◗
1.
Return to the
jprop.htm
file in your text editor.
◗
2.
Within the head element at the top of the file, insert the following link element, as
shown in Figure 1-30:
<link href=”jpsstyles.css” rel=”stylesheet” type=”text/css” />
Figure 1-30
Linking to the jpsstyles.css style sheet
link element
filename of style sheet
style sheet language
◗
3.
Save your changes to the file.
◗
4.
Reload the
jprop.htm
file in your Web browser. As shown in Figure 1-31, the for-
mat and the layout change to reflect the styles in Dave's style sheet.
