cascading classes with one tag

[moreta]

We've defined a class for a section header .section. It has default background and foreground colors, and is used for only one line of text at a time. We'd like to use this stye for various section headers, but change the colors according to the type of section .memosection, .notesection., etc.

<STYLE type=""text/css""><!--
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
clear:left;
}

.memosection {
background:red;
color:white;
}

.notesection {
background:green;
color:white;
}
--></STYLE>
<div class="section">
<div class="notesection">
Open Endorsements
</div>
</div>
Is there a cleaner way than using two <div> tags?

Thank you,
moreta

[AdamGundry]

You can use multiple CSS classes: http://www.webmasterworld.com/forum83/966.htm

Adam

Edit: Sorry, link is broken. Check this one out: http://www.webreference.com/authoring/style/sheets/multiclass/

[Mr J]

Why not just go


<STYLE type="text/css">
<!--
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
clear:left;
}

.memosection {
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
clear:left;
background:red;
color:white;
}

.notesection {
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
clear:left;
background:green;
color:white;
}
-->
</STYLE>

then use the appropriate class for the div


<div class="section">Section</div>

or

<div class="memosection">Memo Section</div>

or

<div class="notesection">Note Section</div>

[moreta]

MrJ -- If we code all section layout elements in every section variant, we'll have to change all of them if we decide to use another basic layout for sections. Better to have one section layout, then layer colors on top.

Adam -- I didn't know we could do that! It's... elegant. :cool:

Thanks!
moreta