CSS class implementation that differ only in color

HTML & CSS
1

I am not new to programming, but am very new to CSS paradigms. I have a problem that I have inelegantly resolved. I need an elegant solution because my solution could cause a lot of problems in the future as the site becomes larger.

Here is the problem. I need to have multiple section “headers”, where each header has a different background color.

Right now I have one class for each section header. Each class has a unique set of subclasses. I would prefer to have a single section “header” class (I believe I need to use classes here since the “header” will appear multiple times in the HTML document) with it’s own subclass(es). I want to be able to reuse the section “header”, but I need each “header” to have a different background color.

Any ideas how to setup this sort of thing?

2

You can have multiple classes on the same object. So you could, for example, in your HTML have

<div class="header autumn">...</div>
<div class="header winter">...</div>

and then in your CSS, have

.header {height/width/position/font/all the things common to every header}
.autumn {background-color:#9acd32;}
.winter {background-color:#afeeee;}

and so on. Is that the kind of thing you are after?

3

Yes, I think you hit the nail on the head. I knew that you could have multiple classes on the same object, but didn’t see the application until now.

My solution resulted in nested <div> sections, or multiple classes that did the same thing. Is there a term for what you propose, such as “overloading” classes? I’m just curious so I know what to search for next time.

Thanks a bunch!