Reputation: 27
I have a CSS file on a master page(mpcss.css
).
On one of the content pages I need a totally different style set for most of the controls.
Here I created a new CSS file named contentcss.css
and included it in the content place holder:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="JQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="Styles/ssjquery.css" rel="stylesheet" type="text/css" />
</asp:Content>
But still the CSS from the master page is overwriting the local CSS. How do I fix this issue?
EDIT: I do not have inline styling. I have 2 different CSS files, mpcss.css
and contentcss.css
:
CSS on masterpage
<head runat="server">
<link href="~/Styles/mpcss.css" rel="stylesheet" type="text/css" />
</head>
CSS on content page
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="JQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="Styles/contentcss.css" rel="stylesheet" type="text/css" />
</asp:Content>
Upvotes: 1
Views: 2510
Reputation: 17930
CSS as the name suggests is cascading, meaning that whoever comes last will override the rest.
So, if you have two css files:
<link href="Styles/master.css" rel="stylesheet" type="text/css" />
<link href="Styles/newone.css" rel="stylesheet" type="text/css" />
in that case newone.css rules will override the master.css rules.
Please note, that if you have inline styling (i.e. style tag in the html itself) css cannot override these values.
Upvotes: 2
Reputation: 339
IF you mean that the css in your master page is in-line, then your external css file will not over ride the in-line styles. Try to stray away from in-line styling if this is the case.
Upvotes: 0