I am not new to CSS, I'm just not that adept with it. I ran into an 'issue' today in having a sub-element being overwritten by the parent's css. After some head scratching I realized all I needed to do was add an '! important' to the css (which to show you my ability is brand new to me)

(I have placed a working example @ that illustrates my question in living color)
<http://jsfiddle.net/4RYM3/1/>

```
#byIdName div{  /* #1 */
       margin: 30px;
    background:#FF00FF;
}
div#ByIdNameTwo{  /* #2 */
           margin: 30px;
     background:#00FF00;
}
div.idone{
    margin: 20px;
    background:#FFFF00;
}
div.idtwo{
    margin: 0px;
    background:#cccccc;
}
div.idone2{
    margin: 20px ! important;
    background:#FFFF00 ! important;
}
div.idtwo2{
    margin: 0px ! important;
    background:#cccccc ! important;
}

```

<http://www.w3.org/TR/CSS2/cascade.html#specificity>

Now looking at this, I cannot understand why #1 and #2 seem to behave differently (please look at the jsfiddle link above).  

While I am happy that I got this to work (with the **! Important**) I am lost as to the *why* #1 and #2 are behaving in the manner that they are. 

Can anyone shed some light on this behavior? 

Is one the preferred method and the other looked down upon, and if so why (this is my main question)?

thanks in advance