As per a certain source, conflicting CSS styles on the same element should be overridden by embedded styles over external styles, but my observation proves otherwise.
My HTML code (simplified version) is as follows:
<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>
My expectation was for the style rule defined for .dialog_error_container to take precedence over div.alert-box, but the actual result contradicted that assumption (refer to the image below).
I would appreciate an explanation as to why the embedded style failed to override the external style.