HTML and CSS Reference
External Style Sheets
Styles set by the author of a Web page and stored in an external style sheet are loaded
after internal and user-defi ned style sheets. You've already worked with external style
sheets in the fi rst two tutorials using CSS fi les created for you. Recall that an external
style sheet is included by adding the link element
<link href=” url ” rel=”stylesheet” type=”text/css” />
to the document head, where url is the URL of the external style sheet fi le. The style
sheet rules in an external style sheet take precedence over any rules set in the browser's
internal style sheet or in a user-defi ned style sheet.
Tammy already has created a style sheet for her sample pages to defi ne how the ele-
ments should be laid out on the page. You'll apply the style rules from her sa_layout.css
fi le to the Sunny Acres home page now.
To link to the layout style sheet:
1. Return to the home.htm file in your text editor.
2. Directly above the closing </head> tag, insert the following link element (see
<link href=”sa_layout.css” rel=”stylesheet” type=”text/css” />
Linking to an external style sheet
style sheet file
3. Save your changes to the file.
4. Reopen the home.htm file in your browser. As shown in Figure 3-7, the layout of
the page has been altered using the design styles present in the sa_layout.css file.