Question

I have a style set for many divs that looks similar. The only difference is that each div has different padding and margin setup. Something like this:

<div class="mainStyle" id="cc">CC</div>
<div class="mainStyle" id="bb">BB</div>
<div class="mainStyle" id="aa">AA/div>

And have:

.mainStyle {
    float: right;
    width: 60px;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0;
}

And for each id have only:

#aa {
    margin: 0px 2px 0px 2px;
    padding: 2px 0 5px 0;
}

#bb {
    margin: 10px 2px 10px 2px;
    padding: 2px 0 5px 0;
}

#cc{
    margin: 10px 2px 10px 2px;
    padding: 20px 0 50px 0;
}

I know this is the wrong syntax but I don’t know how else to ask the question…
I don’t want to have a long style definition for each element id because they are %90 the same except the padding and margin. I want to somehow combine the style of the class and the element.

How do I do this?

Answer 1

What you’ve written will accomplish what you’re asking. You do have a syntax error in your code, the tag for the final AA element is missing the left <. Also, just remember that order is important when it comes to CSS styles. The styles for the id’s needs to come after .mainStyle and any other styles that may overwrite your margin or padding. You can overcome this necessity by using the !important modifier on your styles.