CSS Cascading Order

Cascading Order

Stylesheets cascade at a very simple level, this means that the order of CSS rules matters; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

h1 {
    color: red;
h1 {
    color: blue;
<h1>Heading text.</h1>

Heading text.

The priority of codes can be a little bit confusing. External file has less priority and inline style has the highest priority.

It means, if you add style by inline method, the inline style will be added and browsers will ignore the other styles.


If you have a style with !important, the style will be added no matter the other styles have high priority or not.

p {
    background: #cccccc !important;

If two styles have !important, the style with highest priority will be added.