HTML and CSS Reference
In-Depth Information
CSS to external CSS. Select the CSS rules (all the lines of code between, but not includ-
ing, the opening and closing
<style>
tags). Use Edit, Copy or press the
keys to
copy the CSS code to the clipboard. You will place the CSS in a new file. Launch
Notepad, paste the CSS style rules (use Edit, Paste or press the
∏
+
C
keys), and save
the file as trillium.css. See Figure 3.15 for a screenshot of the new trillium.css file in
Notepad. Notice that there are no XHTML elements in trillium.css— not even the
<style>
element. The file contains CSS rules only.
∏
+
V
Figure 3.15
The external style
sheet named
trillium.css
Next, edit the index.html file in Notepad. Delete the CSS code you just copied. Delete
the closing
</style>
tag. Replace the opening
<style>
tag with a
<link>
element to
associate the style sheet named
trillium.css
. The
<link>
element code follows:
<link href="trillium.css" rel="stylesheet" type="text/css" />
Save the file and test in a browser. Your Web page should look just like the one shown
in Figure 3.12. Although it looks the same, the difference is in the code—the page now
uses external instead of embedded CSS.
Now, for the fun part—you'll associate a second page with the style sheet. The student
files contain a services.html page for Trillium at Chapter3/services.html. When you dis-
play this page in a browser it should look similar to the one shown in Figure 3.16.
Notice that although the structure of the page is similar to the home page, the styling of
the text and colors are absent.
Launch Notepad to edit the services.html file. If you view the XHTML code you'll
notice that this page is ready for our trillium.css styles—for example, the
nav
class and
footer
id have been coded as attributes in the corresponding navigation and page
footer areas. All that's left for you to do is to code an XHTML
<link>
element to asso-
ciate the services.html Web page with the trillium.css external style sheet. Place the fol-
lowing code in the header section above the closing
</head>
tag:
<link href="trillium.css" rel="stylesheet" type="text/css" />
Search WWH ::
Custom Search