Until now, we've been embedding the style sheet into the page. A much more powerful use of style sheets is to link to them. Take this simple example...
<html>
<head>
<title></title>
<style type="text/css">
h2 { color:#ff0000; font-style:italic; }
</style>
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
Take out the guts of the stylesheet and save it in a separate file, such as mystyle.css...
h2 { color:#ff0000; font-style:italic; }
Then, in your page, link to it instead...
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
The whole idea behind this should be pretty obvious... one style sheet can be used across a whole website, or even multiple websites. If there is a conflict between an embedded style sheet and a linked stylesheet, the embedded one will take precedence.
Exercise: Make three sample web pages with a couple links. Make one stylesheet that controls all three documents. Make it so that all links and vlinks are medium green and bold, active links are yellow and bold and when the mouse hovers over them they turn a bright green and bold.
Well, that's it for this CSS Tutor. I encourage you to work a little of this style sheet material in your page. Explore further because there is a lot that's been written on the subject.
Before we close, I have to leave you with a bit of advice (if it sounds familiar, you're right)...
Good luck!
| CSS Tutor |
| Lessons: Intro 1 2 3 4 5 6 CSS Reference |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
