CSS inherit style

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 hav开发者_StackOverflowe 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?

---

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.

---

I don't understand your question. You can perfectly combine an ID with a class the way you did. Are you looking for a way to reuse these id's? You can just convert them to classes and in html use this:

<div class="mainStyle aa">AA/div>

There really is nothing wrong with your code.

---

I'm not sure I'm totally understanding your question. You "can" target html IDs in CSS using the class, like .mainstyle#aa, but that's completely overkill. There really isn't too much to simplify:

.mainStyle {
    float: right;
    width: 60px;
    margin: 10px 2px 10px 2px;
    padding: 2px 0 5px 0;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0; }    
#aa { margin: 0px 2px 0px 2px; }
#cc { padding: 20px 0 50px 0; }

It's also better practice to do something like:

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

and

/* Use the child selector... */
.main > div { /* apply .mainStyle here */ }
#aa...

---

Like this.. This is the cascade part of cascading style sheets don't do the same thing twice just write it onces and the over ride it later on down the line if you need to. The CSS settings set after will over ride the one set early. Also you should research specificity concerning css.

CSS

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

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

#cc{
    padding: 20px 0 50px 0;
}

---

There is nothing wrong with that syntax, but you can make it less repetetive. An id is more specific than a class, so you can just override settings from the class style:

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

#aa {
    margin: 0 2px;
}

#bb {
}

#cc{
    padding: 20px 0 50px 0;
}

If you don't want the class on the element, you can use the , operator to use multiple selectors for a style. Style rules are applied in the order they are written, so the later rules with the same specificity will override previous rules:

#aa,#bb,#cc {
    float: right;
    width: 60px;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0;
    margin: 10px 2px;
    padding: 2px 0 5px 0;
}

#aa {
    margin: 0 2px;
}

#bb {
}

#cc{
    padding: 20px 0 50px 0;
}

(The empty #bb rule is only included to show that I haven't forgotten it. As it's empty it is of course not needed.)