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 th

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