Share Styling Between CSS Classes

Question

In this question, I was given a really cool answer to alternating an image and its description between left and right, respectively. Now I want to apply styling to both, e.g. padding-top, padding-bottom etc. How do I apply a style to both the RowStyle and AlternatingRowStyle in this scenario.

<AlternatingRowStyle CssClass="ProductAltItemStyle" />   
<RowStyle CssClass="ProductItemStyle" />
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <div class="Image"><asp:Image runat="server" ID="productImage" ImageUrl='<%# Eval("imageUrl") %>' /></div>
            <div class="Description"><asp:Label runat="server" ID="lblProductDesc" Width="100%" Text='<%# Eval("productDesc") %>'></asp:Label></div>
        </ItemTemplate>
    </asp:TemplateField>

Answer 1

Here's how you do it:

.ProductAltItemStyle, .ProductItemStyle {
    // CSS Rules that apply to both go here
}

Answer 2

Alternatively you can do this:

<AlternatingRowStyle CssClass="ProductAltItemStyle ProductCommonStyle" />   
<RowStyle CssClass="ProductItemStyle ProductCommonStyle" />

ProductCommonStyle contains formatting that is common to both alternating and standard rows.

Even better, you can assign a style to your whole gridview, and use that to define the shared classes:

table.GridViewStyle tr td
{
   padding:3px 5px;
   border:1px solid gray;
}

tr.ProductAltItemStyle td
{
    background:white;
}

tr.ProductItemSTyle td
{
    background:silver;
}