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.
You have to write:
.color_red, .banner { color: Red; }
.banner { display: block; width: 100%; }
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>
