possible? internal reference among css styles

I have been trying to determine the possibility [can it be done?] and method [wehat would the refherence look like?] of defining a color in one part of my css document and having other styles get their color values from that defenition. I'd prefer to do this without using multiple style sheets or nested styles.

An example of what I'd like to do would be the following:

.MainColor{#000000}

.TableBorder{color: .MainColorValueGoesHere}

I'd like to do this so I can set up three or four items similar to .Maincolor [to create a color scheme] and then have all my other styles get their color vales from those three or foeur items. This would allow me to change entire color scheme for my pages by just altering the 3-4 items.

If anyone knows of alternate workarounds or can suggest a different approach, all help is greatly appreciated.

I know what you're talking about. On my site I have a rounded border for the main content of each page, and I have it down to where I can change the color of the border by changing one number on the style sheet. It would be nice to be able to name that color something like BorderColor, and then later if I add other, similar features, or if I want to use the same color for other purposes, so be able to reference that definition. It probably can be done, but I don't know how to do it.

You could create a JS script to write out your stylesheet and set your colors through variables, so you only have to change the variable once...

Do you mean use JS to "write in" my values like so:

javascript:

function DisplayColor(i)
{
document.write(Color[i])
}

then in my css use:

.MainColor{color: DisplayColor(i);}



[I know the syntax is off, I haven't used js to "write" into a document in a while and need to lookup the syntax]

So, the general idea is to set my color values in a js file/function then call those values within my css stylesheet. Correct?

Something like that, but you may have to actually document.write the entire stylesheet (or at least the styles you want to be able to use the variable with -- there's no reason not to have a separate non-variabled style sheet); I'm not sure if you'll be able to call a JS function from inside the style itself.



Not the prettiest way to do it, but it should work.

I'll look over my current structure and see how hard it would be to implement it as js. I didn't want to use two styleshees, but found a very "clean' way of swapping the color schemes at:

http://www.r7designer.com/news/dw_templates/000052.html

Requires changing just one line in your page and the entire "color scheme" is updated. Nice and organized unfortunately I'll have to edit my main .css to remove all references to a second "color" .css.

Still think there must be a way to reference a previous style, it would be a great help since most of my styles share two to three colors.

How can I set the color value of #999966 once and have my other styles [.masthead_livechattxt , .masthead_slogantxt , and .masthead_telephonetxt] "assume' their color from the initial defenition?

.masthead_livechattxt {
color: #999966;
font: 14px Arial, Helvetica, sans-serif;
text-align: center;
}

.masthead_slogantxt {
color: #999966;
font: bold 18px "Courier New", Courier, mono;
}

.masthead_telephonetxt {
color: #999966;
font: normal 16px Arial, Helvetica, sans-serif;
padding-right: 8px;
text-transform: none;
}