Re: Possible to use two CSS files for one page?

Greg G wrote in message news:tf8mj11fs3sr86fuqiusr8la7ieaqic14m@xxxxxxxxxx
> On Wed, 28 Sep 2005 17:18:51 -0500, Robi wrote:
>> g at risky-biz.com wrote in message news:1127935385.754379.223000@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
>>> I'd like to have a CSS file for everything that's common to my site,
>>> and other CSS files that are specific to certain pages or groups of
>>> pages. When a page loads, it would load in BOTH the General CSS and the
>>> specific CSS file for that page. As long as none of the selector names
>>> were the same on both, could the page follow the styles set out in both
>>> files?
>>
>> yes, as follows:
>>
>> <LINK REL="style***" TYPE="text/css" HREF="/library/shared/css/general.css">
>> <LINK REL="style***" TYPE="text/css" HREF="/library/shared/css/specific.css">
>>
>> besides, you can purposedly "modify" a *general* style in the *specific* style***.
>>
>> I'd suggest the following to read:
>>
>> http://www.w3.org/TR/REC-CSS1#containment-in-html
>>
>> http://www.w3.org/TR/REC-CSS2/cascade.html#at-import
>>
>>
>>
> Thank you. Here's why I want to do this.

you're welcome

> I have a number of photo gallery pages that will have the same overall
> look, but a different background image for the TOC area and possibly
> some other slight changes. I started out doing this by copying the CSS
> file, making the changes, and giving it a new name. But I realized
> that should I want to do something global, change the background from
> black to white for example, I'd have to do that on a bunch of
> different files.
>
> Following your advice I will soon make up a style*** that has all
> the common elements and several others with the variable stuff.

I don't know exactly how the '@import' rule behaves with relative urls

Let's say yor page is located in /www/root/galleria
(galleria has a subdirectory css -> /www/root/galleria/css)
the global.css is located in /www/root/css
if you have other pages in other directories i.e.
/www/root/gallerib (including subdirectory css)
/www/root/galleric (the css subdirectories are not necessary, but they
give a clean slate and order ;-)

Now for all galleria pages you have a specific style that differs from
the global.css. let's call it common.css and place it in the subdirectory
/www/root/galleria/css

now you can have the following lines in your html page:
<link rel="style***" type="text/css" href="/css/global.css">
<link rel="style***" type="text/css" href="css/common.css">

note the difference in the hrefs (one is "absolute" and one is "relative")

I somehow think that the same is possible with the '@import' rule
where you would only need the global.css link line, and in global.css
you would have the following line:
@import url(css/common.css);
but here is where I am not sure about the rule.
Wwill the browser think common.css is in /css/css/common.css
or since gallery.html is in /galleria/gallery.html by linking to the global.css
style*** in /css/global.css will the '@import' rule in global.css be
understood as /galleria/css/common.css

or instead, if that doesn't work
<style type="text/css">
@import url(/css/global.css);
@import url(css/common.css");
</style>


of course, you could even go further and add page specific styles
<link rel="style***" type="text/css" href="/css/global.css">
<link rel="style***" type="text/css" href="css/common.css">
<style type="text/css">
h1 { color: blue }
</style>

to make it a bit more complicated, add media types ;-)
http://www.meyerweb.com/eric/articles/webrev/200001.html


BTW, if you're going to have your gallery pages sent as XHTML then AFAICR
you will need to have all your tags and selectors defined in lowercase.

( http://www.w3.org/TR/REC-CSS2/selector.html#q1 second paragraph )


I am honestly very unfamiliar with the '@import' rule, and might be giving
a completely wrong advice here, so if someone else can shed some light on
anything that I have misunderstood, It would be greatly appreciated :-)


.