CODEWITHSUNDEEP
css
tamakisquare
tamakisquare

Reputation: 17077

Why do I see external CSS overriding embedded CSS?

According to this source, when there are conflicting CSS styles on the same element, embedded styles override external styles but that is not what I have observed.

I have the following HTML (simplified):

<html>
<head>
  <link rel="stylesheet" type="text/css" href="foundation.min.css" />
  <style type="text/css">
  .dialog_error_container
  {
    display: none;
  }
  </style>
</head>
<body>
  <div class="dialog_error_container alert-box alert">...</div>
</body>
</html>

I was expecting to see the rule defined for .dialog_error_container taking precedence over the one for div.alert-box but I got the opposite result (see the image below)

enter image description here

Please explain to me why the embedded style doesn't override the external style.

Upvotes: 1

Views: 1675

Answers (4)

Andrew Marshall
Andrew Marshall

Reputation: 97004

There is no difference between external and embedded CSS—they’re both treated exactly the same. The reason it doesn’t override is because div.alert-box is more specific than .dialog_error_container. Breaking down the specificity:

  • div.alert-box gets a specificity of 0,0,1,1 because it has 1 class and 1 element.

  • .dialog_error_container gets a specificity of 0,0,1,0 because it has 1 class.

If the specificity of these two were the same then whichever one is defined last wins.

Note that it is generally best to make your CSS selectors have the lowest specificity possible, as this makes them easier to override.

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201846

The source cited is in error. Check out the authoritative specification: CSS 2.1, clause 6.4.1 Cascading order. With respect to “origin”, both external and embedded style sheets are “author style sheets”. Thus, the next criterion is specificity, and .dialog_error_container (just a class selector) is less specific than div.alert-box (element type selector combined with class selector).

Using div.dialog_error_container instead would make the specificity equal. Then “sort by order” would step in, and the embedded style sheet would win – not by virtue of being embedded but due to being later (the style element in this case appears after the link element that refers to the external style sheet).

Thus, it would be safer (against future reorganizations of the style sheets) to make the specificity higher, e.g. by using body div.dialog_error_container (a bit artificial, but it works, and it’s better than using !important, which should be last resort only).

Upvotes: 2

Ashwin Ramaswami
Ashwin Ramaswami

Reputation: 913

Probably the external css overrides the embedded style because it is more specific; it has rules for div.alert-box, both an element and a class while the embedded style has .dialog_error_container, a class.

Upvotes: 1

scottlimmer
scottlimmer

Reputation: 2278

That link is leading you astray. Embedded and external styles have the same level of specificity, it then comes down to the selector. In which case div.alert-box is more specific than .dialog_error_container

The easiest way to create the behaviour you're after with what you have is to change the embedded selector to div.dialog_error_container

Upvotes: 3

Related Questions