title: Limit scope of external css to only a specific element?
body: <p>I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.</p>
  
  <p>While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <code>&lt;script&gt;</code> and <code>&lt;link&gt;</code> tags into the head of the page, then loading the html into a <code>&lt;div&gt;</code> screen.</p>
  
  <p>The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).</p>
  
  <p>My question is: Is there any way to limit the "scope" of an external <code>.css</code> file to apply only to objects within the <code>&lt;div&gt;</code> screen? Would it make any difference if instead of me injecting it into the <code>&lt;head&gt;</code> of the page, I inject it into a <code>&lt;style&gt;</code> element in the <code>&lt;div&gt;</code> screen?</p>