title: Stop a child DIV to inherit style from its Parent Page
body: <p>Say there is a webpage with its own stylesheet. I have a popup or a modal (appending using Javascript at the end of the page), where I want to have its own style. The content is dynamic so I cannot target each and every element. Is there a way to reset the css inside the child element or restricting the parent stylesheet affecting it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.headline{ color:blue; text-transform:uppercase;font-size:30px;}
  .para{color:green;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;&lt;body&gt;
    &lt;div class="parent"&gt;
      &lt;h2 class="headline"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/h2&gt;
      &lt;p class="para"&gt;
       Phasellus sed molestie quam. Aliquam id sodales est. Fusce non metus lacinia, tempor sapien quis, ultricies nisl.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal"&gt;
      &lt;h2 class="headline"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/h2&gt;
      &lt;p class="para"&gt;
       Phasellus sed molestie quam. Aliquam id sodales est. Fusce non metus lacinia, tempor sapien quis, ultricies nisl.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now The text that comes in the modal is dynamic and I don't want the style for classes <em>headline</em> and <em>para</em> get inherited. I want modal to take default browser style.Just like the iframe don't get affected by it parent page. Not sure if it is doable. </p>