CSS style sheet in child content place holder not being applied

Question

I have a master page with CSS style sheet references in its head tag. I also have a Content Place Holder in the master page head tag. In a child page using that master page I've placed a CSS style sheet reference specific to that page in the Content Place Holder of the head.

The CSS style sheet in the child page has styles which are supposed to override some of the styles in the CSS style sheets in the master page. Only some of the styles from the master page are supposed to be overridden not all.

The CSS style sheet references in the master page are at the top of the head tag and the Content Place Holder is at the bottom so I thought the one in the child page would take precedence but it doesn't.

How can I get the style sheet in the child page to get precedence over the style sheets in the master page?

Can someone explain what causes this to happen?

Answer 1

I found the answer to my question here.

My style sheet reference looked like this

 <link href="~/Styles/PopForms.css" rel="stylesheet" />

and as explained there the ~ is not understood by the browser in this context.

I changed the reference to

<link href="../Styles/PopForms.css" rel="stylesheet" />

and it now works fine.

Answer 2

If you have the same class name in two different pages and you want to change the default, just use '!important' immediately after the declaration.

.red-background { background-color: red; } /* MASTER */
.red-background { background-color: green !important; } /* CHILD PAGE */

Answer 3

If you don't want to use !important going with a child page container/target with a specific class is the way to go

.some-class { 
  background-color: deepskyblue;
}

.child-container .some-class {
  background-color: deeppink;
}