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

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; }