<style>
.bgClr{
background-color: lightgreen;
}
</style>
<link [email protected]("~/Content/css/xyz.css") rel="stylesheet" />
<div>......
<input type="text" class="bgClr" />
....</div>
Here is the code I've written in my html page. In xyz.css, I have defined the same css class like this
.bgClr{
background-color: red;
} // in xyz.css
But in result, background-color color of the control is always Red.
May I know the reason why the .bgClr of xyz.css is always taken ?
Because it was attached later. If the external stylesheet is placed after the internal's, it will override all previous already defined selectors (internals or externals).
But if you have inline styles, they have the highest priority
style="background:red;") and then I add a <style> block at the end of my HTML document, trying to override that element, the inline-rule should win AFAIK.
<style> had a higher priority over <link>, which seems to be backed up at least by this source - has this changed?It takes the style of the stylesheets added latest in your html. Try placing your stylesheet link at the very top.
The code and external links are interpreted sequentially. Which means the bottom most link will override the preceding ones.
This isn't about scope, this is about specificity.
The definition in the file was considered a higher specificity since it was declared later.
There are a lot of other contributing factors to specificity, you can read all about them here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
<style>would have priority over<link>(which it does, theoretically) but today I learned that<link>will still override<style>if it is defined after the latter. +1