Color Coding Pages

[martinship]

My latest CSS design is mostly designed in gray, but each main section (for example, Widgets, Contact, and Widgetmaker's Biography) needs to be given its own color. The Widgets headlines might be green, contact could be blue, etc.

This headline color will correspond to the background color of the navigational button for that page. The Widget navbar button background would be green, while Contact would be blue, in this example.

Should I do this by applying two stylesheets for each page: one to define the layout, and one to define the color for the page? That way, I could swap out one color for another. Would that be better than having one stylesheet where I just added extra classes for the extra colors?

Of course, there are other extra-coding pitfalls with having each navbar button background being a different color. Short of a template system, I'm guessing there are no easy code-saving fixes for this, either.

Ideas?

[londrum]

i would just do one stylesheet (but it depends how big your stylesheet is) and then put an individual ID on the body tag.
that is all you need to do -- just a single ID on the body tag.
and then you can change whatever you want in the stylesheet. for example, say your pages had the following IDs - #widgets, #contact and #biography - all you'd have to do to change the heading would be:

#widgets h1 { color: green; }
#contact h1 { color: blue; }
#biography h1 { color: red; }

[Marshall]

The other option is using two classes or an 'id' and a class combination. The 'id' could define the layout of say a <div> or <td>, depending on your design style, the use a class to add the bacground and font colors.

#header {
size, shape, font-family, etc }
#content {
size, shape, font-family, etc }
#footer {
size, shape, font-family, etc }

then
.header {color, background, etc}
.content {color, background, etc}
.footer {color, background, etc}

End up with
<div id="header" class="header">content</div>

and so on.

Marshall