Color strategy for CSS

Hi,

I'm interested in being able to easily change my site's colors. I've got a main color and a secondary color. Sometimes the main color is maroon and the secondary color is gold, but they may change. I have a lot of design elements that I've defined as classes, that are applied to <div>'s, e.g.:

Code:

---

.tabbar      {
                position: absolute;
                margin: 0px;
                top: -31px;
                left: 5px;
                width: 710px;
                height: 24px;
                text-align: left;
                background: maroon;
              }
.textarea    {
                position: absolute;
                margin: 0px;
                padding-left: 17px;
                padding-right: 42px;
                padding-top: 17px;
                padding-bottom: 17px;
                top: 0px;
                left: 428px;
                height: 285px;
                width: 282px;
                font-family: verdana, arial, sans-serif;
                font-size: 7pt;
                line-height: 1.4em;
                text-align: left;
                background: gold;
              }

---

What I'd like is for .textarea to get the secondary color, not hardcoded to gold and for .tabbar to get the main color, not hardcoded either. Then I could just assign colors to main and secondary just once and see what the results for the entire site would be. Any ideas?

Thanks,

cudabean

I'm not sure exactly what you mean by main and secondary colours, but I just wanted to say that if you are assigning a background colour to an element you should also use a foreground colour (color: #xxxxxx) as some user's may have a different default fore colour to what you have on your PC, and this could be the same as the background colour you have assign and so they wouldn't see any text. Anyway, if you could elaborate a little more what you mean by main and secondary colours I'll try to help.

Main and Secondary are just terms that the designer invented. It just means that most of the <div>'s will have the main background color and somee of the other <div>'s will have the secondary background color for contrast and embelishment. The designer gave me a table of acceptable main and secondary color pairs. The secondary colored <div>'s wil be on top of or right next to the main colored <div>'s

Here is my list of color pairs:
main: Red: #990000
2nd: Yellow: #ffcc66

main: Grey: #626879
2nd: Peach: #f1dac6

main: Green: #999966
2nd: Yellow: #ffcc66

main: Blue: #78a8d9
2nd: Green: #dada8a

The ideal situation would be to set CSS variables (Yep, I know, CSS doesn't have them--at least there's no "variable" listed in the index of my CSS book) just once at the beginning and be able to transfer the colors to the various <div>'s.

Also, thanks for the advice on the foreground color. I'll be using that to esure my text is black.

thanks,

cudabean

I think I understand you now. You want to be able to set a background colour one element and then make .textarea also take those properties, and add then add some different properties to .textarea afterwards. Is that right? You can do it, for example, something like this:

Code:

---

.main, .tabbar {
  background: maroon;
}


.tabbar      {
                position: absolute;
                margin: 0px;
                top: -31px;
                left: 5px;
                width: 710px;
                height: 24px;
                text-align: left;
              }

---

So just seperate elements by commas. Sorry if that's not what you're after :p

Yeah, that's perfect. Thanks. I didn't know you could 1. separate by commas like that and 2 further refine an existing class.

Thanks again.

cudabean

Yeah I'm sure it's valid. Make sure you use http://jigsaw.w3.org/css-validator/v...or-upload.html to check your CSS files from your hard disk. It helps me a lot :p