It’s because they have a hierarchic structure, so an external stylesheet would be over-ridden by an internal stylesheet, which in turn would be overridden by inline styles within HTML elements.
What overrides inline styles?
Two external stylesheets cascade between themselves, so the most recently linked one overrides clashing items in the one before. Same with internal stylesheets, and inline styles. So we could have <body style=”color:green”> and all this text would be green except <span style=”color:red”> this text because it’s got a more detailed scope than the body’s inline style declaration, which still reaches this text but the span style overrides it if it’s set. Similarly, <span style=”color:red;font-size:10px;color:blue”> this would be blue, because the most recent declaration takes priority. So it’s about scope, not just in three layers but throughout the depth of all elements, and it’s about recency also.
Sometimes a more specific declaration can take priority also, so an internal stylesheet might say body{color:red} but then an external stylesheet might say #span1{color:blue} and then the element called <span id=”span1″> would be blue, taking the rule from the external sheet just because it’s more detailed, specifying by ID usually overrides everything else.
But then an inline style might not work, for example <p style=”color:blue”> this could be red. Because the internal or external stylesheet could use a special code to override everything else, like this: p{color:red!important}. !important basically means override everything else. Then the only thing that would override this, is another !important, for example <p style=”color:blue!important”> now it’s blue.
It’s usually bad practice to use !important because it throws a real spanner in the works of the cascading styles, but it’s a useful shortcut to know in case someone else has used it, for example the theme developer, or if you want a quick fix.