CODEWITHSUNDEEP
css
ghost2092000
ghost2092000

Reputation: 377

CSS Specificity - Internal vs inline vs external style

I know that inline has more specificity than external but does internal have more than inline? Or is it the other way around?

Internal:

<style>
p{
  color: red;
}
</style>

Inline:

<p style="color:blue">

External:

p{
  color:green;
}

Upvotes: 0

Views: 1558

Answers (1)

matthew-e-brown
matthew-e-brown

Reputation: 3087

No, internal does not take over inline. Inline styles are always the highest priority. From Mozilla Docs:

Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

These "external stylesheets" also include style tags in the head or body. See for yourself:

p {
  color: red;
}
<style>
  p {
    color: red;
  }
</style>

<p style="color: blue">
  Hello!
</p>

<style>
  p {
    color: red;
  }
</style>

Whether it is before or after, the only thing that will override an inline style is !important, which you should shy away from using. Refer to the MDN link above.

Finally, be careful when you say,

I know that Inline has more specificity than external [...]

since specificity is a special CSS concept. Yes, inline styles will override external styles (when not using !important), but don't confuse specificity with precedence. CSS rules are ranked in two ways:

  1. Specificity
  2. and Order.

This includes order across separate files. If you put your style tag before your link tag, then the external styles will overwrite the internal ones (if they are of the same specificity).

Again, this doesn't apply much to internal styles, and this is mostly a semantics clarification for "specificity," but it doesn't hurt to point out.

Upvotes: 3

Related Questions