Why?

Because of its “rule execution” format, those rules cascading from the top of your styles will not overwrite style blocks that are lower (after) them in the style declaration. But the last rule will carry the most value, or weight – thereby generating the final style.

So let’s say you have the following CSS rules in an external style sheet:

* {margin: 0; padding: 0;}

And you declare a h1 tag to present as such:

h1 {margin: 0 0 2em 0;}

So your CSS file looks like this:

* {margin: 0; padding: 0;}
h1 {margin: 0 0 2em 0;}

Do you see why the h1 will have a bottom margin of -2em? Good. Now what if you had an inline style (although you don’t do you? I mean, you want to separate content from presentation as much as possible, right?) for your h1 tag within your webpage:

<h1 style="margin-bottom: -2em">Heading</h1>

Due to the cascading effect, that h1 tag will have it’s bottom margin raised up to -2, because of its inline style. That’s the power of CSS, and that’s all for now!