Including one stylesheet inside another

C

Chris

I've got a puzzling problem.

We have multiple sites that use the same large css file. I just make a
copy of it for each site. For each site, though, I'd like to customize a
couple small things like link color.

I could just edit each copy of the css file, but that would make it hard
to maintain when I want a change to appear in all sites.

The ideal solution would be to use an <include> in the css file:

my-big-file.css would be:

#mystyle {
whatever:10px;
}
<include include="my-custom-css.css">

Then for each site, "my-custom-css.css" could be different.

The obvious solution here is to break it up into two different css files
and include both in every page in every site. This would affect a lot of
pages unnecessarily, though, and would be cumbersome if I ever had to
break it into 2, 3, or 4 small css files. A single include statement in
one file would be a lot cleaner.

Is there some way to do this kind of include?
 
E

Els

Chris said:
I've got a puzzling problem.

We have multiple sites that use the same large css file. I just make a
copy of it for each site. For each site, though, I'd like to customize a
couple small things like link color.

I could just edit each copy of the css file, but that would make it hard
to maintain when I want a change to appear in all sites.

The ideal solution would be to use an <include> in the css file:

my-big-file.css would be:

#mystyle {
whatever:10px;
}
<include include="my-custom-css.css">
Is there some way to do this kind of include?

@import "my-custom-css.css";
 
E

Els

Els said:
@import "my-custom-css.css";

But I'd do it the other way round.
Let each site have its own my-custom-css.css, and have an
@import "my-big-file.css";
in it.

That way you don't have to copy the big file to the different sites
when you make a change to it.
 
D

dorayme

Chris said:
I've got a puzzling problem.

We have multiple sites that use the same large css file. I just make a
copy of it for each site. For each site, though, I'd like to customize a
couple small things like link color.

Nothing easier. You link to the main one on all the sites and you
add underneath another link to another css, the second overriding
a few things you want overridden. Is there some problem you have
for this not to work?

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="supplementary.css">

in the head of the html docs on the site where the supplementary
is appropriate.
 
E

Els

dorayme said:
Nothing easier. You link to the main one on all the sites and you
add underneath another link to another css, the second overriding
a few things you want overridden. Is there some problem you have
for this not to work?

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="supplementary.css">

in the head of the html docs on the site where the supplementary
is appropriate.

From the OP:
<quote>
The obvious solution here is to break it up into two different css
files and include both in every page in every site. This would affect
a lot of pages unnecessarily, though, and would be cumbersome if I
ever had to break it into 2, 3, or 4 small css files. A single
include statement in one file would be a lot cleaner.
</quote>

;-)
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Fri, 01 Feb 2008 23:09:36 GMT
Chris scribed:
I've got a puzzling problem.

We have multiple sites that use the same large css file. I just make a
copy of it for each site. For each site, though, I'd like to customize a
couple small things like link color.

I could just edit each copy of the css file, but that would make it hard
to maintain when I want a change to appear in all sites.

The ideal solution would be to use an <include> in the css file:

my-big-file.css would be:

#mystyle {
whatever:10px;
}
<include include="my-custom-css.css">

The "ideal solution" is to put a style section in each page for
customizations. Anything else is illogical.
 
D

dorayme

Els said:
From the OP:
<quote>
The obvious solution here is to break it up into two different css
files and include both in every page in every site. This would affect
a lot of pages unnecessarily, though, and would be cumbersome if I
ever had to break it into 2, 3, or 4 small css files. A single
include statement in one file would be a lot cleaner.
</quote>

;-)


?

It seems obvious to me too to leave the main css file well alone,
not to touch a single hair of its poor head, not to break it up.
I happily see and agree with it being "cumbersome to break it
into 2, 3, or 4 small css files". I was suggesting no such thing.

The matter is so simple that I might well be missing something
obvious to you all? I think I am having quite a bit of trouble
lately with human communication. I might need extra terrestials
to talk to. But, alas, I am here on earth completely alone.
 
D

dorayme

Neredbojias said:
Well bust mah britches and call me cheeky, on Fri, 01 Feb 2008 23:09:36 GMT
Chris scribed:


The "ideal solution" is to put a style section in each page for
customizations. Anything else is illogical.

No. If there is just one or two pages on one site that needs
something a bit different, then styles in the head to override
main *is* a reasonable thing to add (as you say). But if the
changes are to the site as a whole in some respects, then it is
not necessarily reasonable to do this on every page. But it would
be reasonable to have a supplementary sheet to link to and
especially if there are quite a few.
 
A

Adrienne Boswell

I've got a puzzling problem.

We have multiple sites that use the same large css file. I just make a
copy of it for each site. For each site, though, I'd like to customize
a
couple small things like link color.

I could just edit each copy of the css file, but that would make it hard
to maintain when I want a change to appear in all sites.

The ideal solution would be to use an <include> in the css file:

my-big-file.css would be:

#mystyle {
whatever:10px;
}
<include include="my-custom-css.css">

Then for each site, "my-custom-css.css" could be different.

The obvious solution here is to break it up into two different css files
and include both in every page in every site. This would affect a lot of
pages unnecessarily, though, and would be cumbersome if I ever had to
break it into 2, 3, or 4 small css files. A single include statement in
one file would be a lot cleaner.

Is there some way to do this kind of include?

Separate style from color - one stylesheet that only does positioning,
etc., and another that does color. For example:

Site A:
<link type="text/css" href="style.css" rel="stylesheet">
<link type="text/css" href="style_site_a.css" rel="stylesheet>

Site B:
<link type="text/css" href="style.css" rel="stylesheet">
<link type="text/css" href="style_site_b.css" rel="stylesheet>

Etcetera, etcetera, etecetera (10 points for the source).
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Sat, 02 Feb 2008 01:17:14
GMT dorayme scribed:
No. If there is just one or two pages on one site that needs
something a bit different, then styles in the head to override
main *is* a reasonable thing to add (as you say). But if the
changes are to the site as a whole in some respects, then it is
not necessarily reasonable to do this on every page. But it would
be reasonable to have a supplementary sheet to link to and
especially if there are quite a few.

I took the OP's meaning of "site" in "multiple sites" as "page". If a
site consists of a number of pages, yes, there is a reason to make, shall
we say, a "sub-general" stylesheet. But "individual" stylesheets for
single unique pages is less efficient than including styles in the head.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top