How can I highlight css for a part of a page?
A simple way to "HTML5" would be:
<iframe srcdoc="<p>Hello world!</p>"></iframe> More on this: http://www.w3schools.com/html5/att_iframe_srcdoc.asp
But this is not supported in any of the modern browsers. Any suggestions on an alternative way to make this work?
[edit] Sorry for the lack of clarity. My goal is to open a third-party website using my own CSS in the frame (or other element) of the page. I have my own CSS that controls my content, but I would like a third-party site to also render correctly with its own css and not interfere with each other.
If you understood correctly, “isolation” would mean restricting a subset of styles to only apply to certain content on this page.
I would generally avoid using an iframe (or, rather, a more compatible <object> ), unless this is the only way to integrate third-party content, even if it will actually limit the applicable scope of any application css.
The parent selectors are likely to match what you are trying to do, acting effectively as a "pseudo-namespace" for your rules:
<p>Hello world!</p> <p>Some great content here!</p> <div id="isolated-content"><p>Hello world styled differently!</p></div> and
p {color:black;} #isolated-content p {color:red;} Would apply red color to the second paragraph of "Hello world".
Naturally, all normal css mechanics are still applied (inheritance, cascading, etc.), so you may need to redefine the rules accordingly. If you did not provide specific details of the script, this is the most detailed information that I can offer.