Stylesheets - Possible to use two CSS files for one page?

Author

Possible to use two CSS files for one page?

g@risky-biz.com

2005-09-28, 6:35 pm

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?

Greg Guarino

David Dorward

2005-09-28, 6:35 pm

g@risky-biz.com wrote:

> 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. It could do that even if selectors were the same. The usual rules for
the cascade order apply.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Robi

2005-09-28, 6:35 pm

g at risky-biz.com wrote in message news:1127935385.754379.223000@z14g2000cwz.googlegroups.com...
> 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="stylesheet" TYPE="text/css" HREF="/library/shared/css/general.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="/library/shared/css/specific.css">

besides, you can purposedly "modify" a *general* style in the *specific* stylesheet.

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

Greg G

2005-09-28, 10:32 pm

On Wed, 28 Sep 2005 17:18:51 -0500, "Robi" <me@privacy.net> wrote:

>g at risky-biz.com wrote in message news:1127935385.754379.223000@z14g2000cwz.googlegroups.com...
>
>yes, as follows:
>
><LINK REL="stylesheet" TYPE="text/css" HREF="/library/shared/css/general.css">
><LINK REL="stylesheet" TYPE="text/css" HREF="/library/shared/css/specific.css">
>
>besides, you can purposedly "modify" a *general* style in the *specific* stylesheet.
>
>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.

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 stylesheet that has all
the common elements and several others with the variable stuff.

Greg Guarino

Robi

2005-09-30, 3:17 am

Greg G wrote in message news:tf8mj11fs3sr86fuqiusr8la7ieaqic14m@4ax.com...
> On Wed, 28 Sep 2005 17:18:51 -0500, Robi wrote:
> 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 stylesheet 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="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" 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
stylesheet 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="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" 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/articl...rev/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 :-)