HTML and CSS Reference
In-Depth Information
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>External Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="color.css" type="text/css" />
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
Save the file as external.html in the same folder as color.css. Test your page in a
browser. Your file should look similar to Figure 3.14.
Figure 3.14
This page is
associated with an
external style sheet
The color.css style sheet can be associated with any number of Web pages. If you ever
need to change the style of formatting, you only need to change a single file (color.css)
instead of multiple files (all the Web pages). As mentioned earlier, this technique can
boost productivity on a large site.
This is a simple example, but the advantage of having only a single file to update is sig-
nificant for both small and large Web sites. In the next Hands-On Practice you'll mod-
ify the Trillium Technologies home page to use an external style sheet.
HANDS-ON PRACTICE 3.7
In this Hands-On Practice you continue to gain experience using external style sheets as
you create the external style sheet file named trillium.css, modify the Trillium
Technologies home page to use external styles instead of embedded styles, and associate
a second Web page with the trillium.css style sheet.
A version of the Trillium home page is in the student files. Open the embedded4.html
file in a browser. The display should be the same as the Web page shown in Figure 3.12
from Hands-On Practice 3.5.
Now that you've seen what you're working with let's begin. Launch Notepad and save
the file as index.html in a folder called trillium. You are ready to convert the embedded
Search WWH ::
Custom Search