css: inheritance of values

Can styles be nested to inherit a common value?

For example can two styles with a shared color value be written to inherit that color valuer like so:

Instead of writing:

.masthead_pinstripes {
border-top: medium solid Red;
border-bottom: medium solid Red;
}

.leftnav_rightsidestripe{
border-right: none Red;
border-left: 1px solid Red;
}


Can the following be done:

.ColorVal{
color: Red;

.masthead_pinstripes {
border-top: medium solid Red;
border-bottom: medium solid Red;
}

.leftnav_rightsidestripe{
border-right: none Red;
border-left: 1px solid Red;
}

}



The general idea being that .masthead_pinstripes and leftnav_rightsidestripe would inherit the border colors from somewhere else [ a different style or from a third style they are nested within?

Your help is greatly appreciated as I can't seem to figure this out and am totally confused on how inheritance would work.

You can work this out a couple of ways. If only one element belongs to masthead_pinstripes and leftnav_rightsidestripe, you can use ids instead of classes and then also asign them a class.If that doesn't fit your situation, you can use "inherit" for a color value. I'm not sure how things are setup exactly for you, so I'll use a basic example instead.In the above, an element with class "foo" will have a silver background and the text color will be inherited from the parent element, the body, so it will be black.

I set up a test css and htm file as follows:

CSS:
.colorVal{
color: Navy;
}
#leftnav_rightsidestripe{
border-right: none ;
border-left: 3px solid ;
}
#masthead_pinstripes {
border-top: medium solid ;
border-bottom: medium solid ;
}


HTML:

<div id="masthead_pinstripes" class="colorVal"><table width="75%" border="0" align="center">
<tr>
<td>&nbsp;</td>
<td>leftnav_rightsidestripe</td>
<td id="leftnav_rightsidestripe" class="colorVal">&nbsp;</td>
</tr>
<tr>
<td height="21">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></div>

This seems to work as the masthead_pinstripes work perfectly, however the leftnav_rightsidestripe shows the border, but it is not inheriting the color. Am I applying the class /id correctly to the tables column? FYI I also tried using:

<div id="leftnav_rightsidestripe" class="colorVal"><td>&nbsp;</td></div>

anybody, please advise how to correct this.

You're assigning the color of the text in your colorVal class, not the color of the border. Try this instead:It could also look like this:Not exactly sure how all that would work out. You may get more borders than you want, which you would have to cancel.

I also recommend getting away from table layouts. You're already using divs so go ahead and drop the tables. If you're not comfortable with that, then just apply the CSS to the tables and don't wrap them in divs.