Reputation: 113
My parent page is using custom1.css
and child page is using custom2.css
. My issue is child page css properties are override by parent page css. How can I block parent page css acting on the child page elemenets.
Upvotes: 0
Views: 5045
Reputation: 24766
CSS styles are apply as the order those are in. Check this example, first style override by the second and final width of div will be 40px.
div{
width:300px;
}
div{
width:40px;
}
linking style sheets also the same.
<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
Here style_2.css
override the same styles in style_1.css
because it links secondly.
So what you have to do is, style sheet you need to apply link lastly.
Upvotes: 1
Reputation: 2521
On you your child page please check that you CSS order should be in correct way if you are using both CSS files
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="custom1.css">
<link rel="stylesheet" href="custom2.css">
</head>
so that cascading will work in correct way as per your expectation
also there are other things that you need to check like CSS Specificity, Inheritance, and the Cascade. You may like to check http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ this
Hope it helps!
Upvotes: 0
Reputation: 699
You could either add !important;
after your css styles (which is a bad example) or you could make some more specific selectors.
body div#main{
/* Style */
}
The above is more specific and will "win" over the following:
div#main{
/* Style */
}
Upvotes: 0
Reputation: 31928
How can i block parent page css acting on the child page elemenets?
By removing the custom1.css
reference from the <head>
of the child page.
If, for some reason, you cannot do that, then you need to read about css specificity in order to understand how the "parent css" is overriding rules in the "child css".
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Upvotes: 0
Reputation: 218
Css is applied using levels.
So just adding a container around everything shoudl prevent it
You can do: .class1 #content{ make it blue here }
.class2 #content{ make it red here }
Doing it by file is not possible. You should make sure that never happends, this can yield unexpected results
Upvotes: 0