netten
netten

Reputation: 27

CSS on Master page overwriting CSS on local page

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

Answers (2)

Tomer
Tomer

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

DOCbrand
DOCbrand

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

Related Questions