CODEWITHSUNDEEP
css
Webfreaks
Webfreaks

Reputation: 113

How to override the one css file with another css file

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

Answers (5)

Nayana Adassuriya
Nayana Adassuriya

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

Pravin W
Pravin W

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

Octfx
Octfx

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

cherouvim
cherouvim

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

user3232725
user3232725

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

Related Questions