CSS - Can Someone Help Me Edit A Phpbb3 Style

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

sorry everyone forget about it. Didnt mean to make people start to cry
That is really it. Can some one help?

ok the stylesheet contains this:
BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT
{
font-family: Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
}

and I need to add this into it

BODY {
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

Ok here's what I don't understand. The original stylesheet(used by a php script) contains lots of things at the top separated by commas. Does that mean that it will affect all of those things?
So I have to do this?

BODY
{
font-family: Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT
{
font-family: Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
}

Sorry about the newbie question, but I gotta start some where.

Hello,

I have the following code that creates a progress bar:

Code:

<style>
table.meter {
    background: url("img/m_bg.gif") left center repeat-x;
    height: 13px;
    font-family: sans-serif;
    font-size: 11px;
    }

table.meter td.mark{
    background: url("img/m_mark.gif") right center repeat-x;
    }

table.meter td.mark div{
    background: url("img/m_l.gif") left center no-repeat;
    }

table.meter td{
    background: url("img/m_r.gif") right center no-repeat;
    }

</style>

<table cellspacing="0" cellpadding="0" class="meter" width="250">
<tr>
  <td id="mark" width="60%" class="mark"><div>&nbsp;</div></td>
  <td>&nbsp</td>
  </tr>
</table>

This will make only image progress bar, but how can I write percents straight after table (on the right)?
I need it to look something like this:

<|||||||| > 60%

But if I write "60%" after </table> tag, it will appear on the next line, and if I add another <td> to the table, it will inherit background from table.meter style and I don't need that.

Hope somebody help me.
Thank you in advance.