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.
Search WWH ::

Custom Search