How to preserve styles of embedded widget?

Question

How to make an external PHP widget page have its own CSS. The catch is - when the external page is included it's been affected by the stylesheet of the host page.

The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.

The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.

_Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.

How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?

Answer 1

If I understood correctly, your included page has some CSS rules such as:

div {/*rules*/};
p {/*rules*/};

and so on.

You should change your CSS selectors from the most general ones (div selects all the divs in the page) to the most particular ones (use them in this order: id, class, child-selector) in order for your rules to apply only to your included elements.

For example, say your included page is wrapped in a div, the PHP code would be:

<div id="my_page">
    <?php include "myPage.php"; ?>
</div>

Then, all your rules for the page should refer only to the children of the element with the id my_page:

Instead of

div {/*rules*/};

you'll have

#my_page div {/*rules*/};

Answer 2

CSS Styles prioritize like this:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

Depending on how much CSS you need to apply, you could writ it on the "head" tag.
Hope the suggestion helps.

Answer 3

Try surrounding your widget code in a div with an id. Then prefix each CSS selector used in the widget with that selector.

ex.

<div id="widget"><p class="nav">hello</p></div>

instead of,

.nav{
// styles
}

do

#widget.nav{
// styles
}

Answer 4

You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.

You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.

You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.

Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.

For example, in both of the below samples, the second rule will overwrite the first one:

#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }

or

#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }

Answer 5

You might want to apply a mini CSS reset on your included code. Surround your code in a unique id, like so:

<div id="widget">
    <!--your code here-->
</div>

Now apply the reset to everything inside this, using a basic CSS reset like Eric Meyer's, available here: http://meyerweb.com/eric/tools/css/reset/

Now, apply your own CSS. Nearly all outside CSS will be wiped out, and yours will be applied.