CODEWITHSUNDEEP
phphtmlcss
MikeR
MikeR

Reputation: 83

Way to work with 2 css file, to prevent trouble

I need some idears or informations about the following situation.

I have a page with a own css style-file (Let us call it "Motherpage")

In this Motherpage i load a second html file file by php ("let us call it "Childpage").

    <?php
        $childpage = file_get_contents($pathtoloaclfile);
        echo $childpage;
    ?>

This works fine.

In the Chilpage are one or more own css-styles and css-files.

Now i have trouble with the two(or more) different css-files and styles.

Some styles broken, caused some styles from the chilpage will overrite or add or inherit to the motherstyles :-(

in the motherfile i use a prefix for every class .motherpage body{ ... }

But it seems that that is not enought.

What i can do to make sure, that the motherstyles (also the child-styles for himself too) will work on the elements only defined in the motherstyle css.

For example, in the motherfile is no "body" Style defined, in the childstyle, is it defined. So this will affect to a lot of styles, by inherit

I hope, i could explain, whats the problem, and whats the quetion.

Thanks a lot to inspire and helping.

Upvotes: 2

Views: 73

Answers (2)

Anjana Silva
Anjana Silva

Reputation: 9191

What you can do is (also suggested by @jeff, in comments above), load the styles in this order, in the page where you are having styling issues.

  1. motherpage_styles.css
  2. childpage_styles.css

And override any specific styles required by the page in the childpage_styles.css.

Let's say motherpage_styles.css has following CSS

body {
   background-color: #eee;
}

And in the childpage_styles.css you can override and change the background-color like this.

body {
   background-color: #ff0000;
}

If the order is like above, then this will work without needing of !important. However, the class you are overriding has !important in the motherpage_styles.css, then you will have to use the !important flag in the overriding class in the childpage_styles.css as well.

Hope you will find this helpful. Cheers.

Upvotes: 1

Allan Jebaraj
Allan Jebaraj

Reputation: 1077

You could try loading the new page in an iframe so it doesn't interfere with the CSS styles.

Upvotes: 0

Related Questions