Home/ Questions/Q 9111539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T03:31:49+00:00

According to this source , when there are conflicting CSS styles on the same

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0