Style rules Priorities

As we show, there are three ways to apply styles in the HTML.

Assume that we have defined styles for an element using all three ways and giving different properties and values each time.

For example, take p element.

The external style sheet is:

p { color: red; text-align:center;}

The internal style sheet is:

p { color: green; }

The inline style is:

<p style="color:pink; background-color:grey;">

 How do you expect the paragraph to be displayed?

According to the rule, the closest the style is to the element the highest priority will have.

Thus we have : inline style >  internal style sheet > external style sheet

This means that for mutual properties, the inline style will overwrite the value that is placed in the internal or external style sheet. Also, the internal style sheet will overwrite the external’s property value.

Note

The rule is only applied for mutual properties. Properties that are not defined elsewhere will still be displayed.

According to the above, the paragraph will be displayed with pink color, grey background and aligned to the center of the page.

For more information: https://www.w3schools.com/css/css_howto.asp