[Cira9999]

This is probably a very basic question for someone who has been working with styles for years, so I apologize in advance.

Here are three styles for 3 different buttons:

INPUT.buttons {	
	font-family: Tahoma, Verdana, Arial;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	border-style: solid;
	border-color: #666666;
	border-width: 1px;
	background-color: #748196;
	cell-spacing: 4px;
	width: 70px;
}

INPUT.smallbuttons {	
	font-family: Tahoma, Verdana, Arial;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	border-style: solid;
	border-color: #666666;
	border-width: 1px;
	background-color: #748196;
	cell-spacing: 4px;
	width: 30px;
}

INPUT.longbuttons {	
	font-family: Tahoma, Verdana, Arial;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	border-style: solid;
	border-color: #666666;
	border-width: 1px;
	background-color: #748196;
	cell-spacing: 4px;
	width: 120px;
}

The only difference between the 3 styles is the width. It seems like bad practice to have to declare all the other elements that the 3 styles have in common, 3 times.

I'm wondering what is the best way to handle this. In theory I'd like my code be something like this:

INPUT.buttons {	
	font-family: Tahoma, Verdana, Arial;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	border-style: solid;
	border-color: #666666;
	border-width: 1px;
	background-color: #748196;
	cell-spacing: 4px;
}

INPUT.smallbuttons { width: 30px; }
INPUT.longbuttons { width: 120px; }

and have the latter two styles inherit the "buttons" class style.
I do this with other styles for example:

INPUT {
	font-family: Tahoma, Verdana, Arial;
	font-size: 11px;
	color: #333333;
	border-top: #666666 1px outset;
	border-left: #666666 1px outset;
	border-bottom: #666666 1px inset;
	border-right: #666666 1px inset;
	background-color: #FFFFFF;
	width: 85px;
}
INPUT.prefix { width: 22px; }
INPUT.suffix { width: 27px; }

but that makes sense because I'm declaring a style for ALL input tags and then the classes inherit the INPUT's elements, overriding the width.

Also, I don't want to override the style in the HTML like this:

<input class="buttons" style="width: 10px"....

nor do I want to use JavaScript to dynamically set the width.

How do I do this?

Thanks,

[Winters]

Hope this helps.