How can I efficiently 'subclass' in external CSS?

Question

I have a box defined that works for most of my site:

.searchBox
{
    width: 610px;
    height: 170px;
    padding: 15px 55px 5px 15px;
    background: url('../images/advanced_search_BG.jpg') no-repeat;
    margin-top: 10px;
}

But I have one box that needs to be a little bigger; it has to be height: 220px.

I know I could duplicate the above, calling it, say searchBoxLarge, put that on my div tag, and be done. But that's duplicate code that I don't want.

This might be a 'dumb question', but I'm not trained in CSS and looking for assistance...

What is the format to specify the searchBoxLarge with the height: 220px, but without duplicating the entire searchBox entry?

Answer 1

Add searchBoxLarge to the searchBox declaration, and then make a separate declaration for just searchBoxLarge which overwrites the height value.

.searchBox, .searchBoxLarge
{
    width: 610px;
    height: 170px;
    padding: 15px 55px 5px 15px;
    background: url('../images/advanced_search_BG.jpg') no-repeat;
    margin-top: 10px;
}

.searchBoxLarge
{
    height: 220px;
}