Sent by Lars Holst on 10 February 2003 15:03
A few days ago someone posted a question on the best way to include external
stylesheets in the html code. The post received lots of useful advice from
various posters. When I was a newbie(r) I remember also wanting actual code,
so here's just that: some sample code to complement the advice, if it helps:
*********************
<link rel="stylesheet" type="text/css" media="screen"
href="../../css/nn4.css" />
<style type="text/css" media="screen">@import
url("../../css/main-p.css");</style>
<style type="text/css" media="screen">@import
url("../../css/main-s.css");</style>
<link rel="alternate stylesheet" type="text/css" media="screen"
title="medium" href="../../css/medium.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="large" href="../../css/large.css" />
<link rel="stylesheet" type="text/css" media="print"
href="../../css/print.css" />
**********************
Quick comments:
The first line is the *only* one Netscape 4 understands. Change the media
type to, say, "all" and NN4 ignores; use "alternate stylesheet" instead of
just "styelsheet" and NN4 ignores; use @import and NN4 ignores, and so on.
So this is where you include your NN4 stylesheet.
The following @import lines are only understood by modern browsers, so they
are used to hide css-files from NN4.
Next, alternate stylesheets are included. Whatever alternate stylesheets you
have should be included as related links of type "alternate stylesheet" in
order to a) hide them from the golden oldies, and b) tell smart browsers
(not IE) that the page has alternate styles. I only use two to change font
sizes. You could of curse include as many alternate stylesheets as you see
fit. Just don't overdo it (as the W3C CSS site does).
Finally, a print stylesheet is included. Note the media type. I wish all
websites did this!
That's it. I know there are at least three principally different ways of
doing this, but this one works for me.
Note: In my case I have separated my master stylesheet into two: one that
carries all positioning declarations (main-p), and one that has all the
styles, i.e. colors, fonts, etc (main-s). I think it was Liorean or someone
with a similarly cool name that explained various ways of breaking this down
in more detail as a response to the original post. For instance, you might
want to have fonts declared in a separate stylesheet. I'm not sure how far
you should go in this process though. Perhaps other posters can fill in?
/Lars
