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:itali c; }</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:itali c; }
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)...
- Don't get too crazy with this stuff. Just
because something is "supposed to work" doesn't mean it will. Be
careful when using the positioning properties. There's a lot of potential
for trouble there.
- Just because the promise is pixel perfect
positioning, that doesn't mean that out in the real world, with real
browsers it won't get mangled. Keep in mind that the more you try to
control, the less control you really have. They key to intelligent control
is loose and flexible pages.
- Always check your creation through at least
newer versions of Netscape and Explorer.
Good luck!
