In my previous studies, I had learned that embedded CSS always takes precedence over external CSS. However, I have discovered that the styles that come last in the code actually prevail.
Consider the following code snippet where I have used color:green; in the external CSS for h3:
<head>
<link rel=stylesheet href="style.css">
<style>
h3{
color:red;
}
</style>
</head>
Based on this code, any text within h3 will be displayed in red color.
However, if I rearrange the code as shown below:
<head>
<style>
h3{
color:red;
}
</style>
<link rel=stylesheet href="style.css">
</head>
In this case, the text inside h3 will appear in "green" (assuming I have set "green" as the font color in external CSS).
This discrepancy occurs because the link tag is placed after the style tag.
It seems that external css does not always override embedded css as expected.
Is it necessary to adhere to a rule of placing the link tag before the style tag in the head? Please provide clarification on this matter.