Priority of the three methods

If there is a situation: we use three methods to set css style for the same element at the same time, then which method is really effective? This happens in the editor on the right

1. Use inlineCSS to set the "Super Cool Internet" text to pink.

2. Then use embeddedCSS to set the text to red.

3. Finally, use external style to set the text to blue (set in the style.css file).

But finally you can observe that the text of the short words "Super Cool Internet" is set to pink. Because these three styles have priorities, remember their priorities:Inline > Embedded> External

ButEmbedded >External styleThere is a premise: the position of the embedded css style must be behind the external style. For example, in the right code editor, the <link href="style.css" ...> code is in front of the <style type="text/css">...</style> code (actually This is also written during development). Interested friends can try it, reverse their order, and see if their priorities change.

In fact, in summary, it is --the principle of proximity (the closer to the element being set, the higher the priority).