CSS Style Inheritance

Question

Lets say I want to define 2 styles.

.color_red { color: Red; }
.banner { display: block; width: 100%; }

Is there a way that I can have the h1 style inherit the color_red style? I don't want to have to do

<div class="banner color_red">This is my banner.</div>

I'd prefer to do something like this...

.banner { ... inherit: color_red; }
...
<div class="banner">This is my banner.</div>

And have the banner have red text.

Answer 1

You have to write:

.color_red, .banner { color: Red; }
.banner { display: block; width: 100%; }

Answer 2

No, there is no way to do this directly, better to share style definitions:

.color_red,
.banner
{
  color: red;
}

However I'd like to point out that you're approaching the problem from the wrong direction. Your mark-up should be independant of the style and should lead the style in development ideally. This means that defining .color_red is a serious problem, because it says nothing about the semantics of the mark-up and how much of a problem are you faced with if you need to style that bit of mark-up blue?

Far better to allow your mark-up to exist like this:

<div class="banner highlight">I am a banner AND I am highlighted!</div>

supported by:

<style>
.highlight
{
  color: red;
}

.banner
{
  display: block; 
  width: 100%;
}
</style>