HTMLisEasy.com
HTML tutorials for the rest of us...
CSS Tutor - Lesson 6

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>

VIEW IT


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>

VIEW IT

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.

Here is a solution.


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!

Joe Barta

<< BACK
CSS Tutor
Lessons:   Intro   1   2   3   4   5   6     CSS Reference
HTML 4.0 Reference      Google Groups (Advanced Search)