title: Disabling Bootstrap CSS inside a certain container, stop overriding css
body: <p>I am currently using bootstrap and knockoutjs to display a webpage that has a live preview of some data.  For instance, a user enters a title, in a textbox, on the left hand side. Then, the right hand side of the page updates to format that text based on some other settings. So it might be something like &lt;h1&gt;{title}&lt;/h1&gt; or it might be &lt;u&gt;{title}&lt;/u&gt;. However, all that is requested from the user, at this point, is the title in plain text.</p>
  
  <p>The issue is, as the preview is actually a HTML document created by the users.  So, some of the bootstrap CSS overrides the CSS specified by the users. So the above &lt;h1&gt; will inherit bootstraps h1 CSS class, rather than using whatever is in the users HTML template.  This means at the time of using the created document, the preview may differ to what is actually happening.</p>
  
  <p>JSFiddle example: <a href="http://jsfiddle.net/Piercy/4fcmk/" rel="noreferrer">http://jsfiddle.net/Piercy/4fcmk/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;h1&gt;Header 1&lt;/h1&gt;
  
      &lt;div id="Preview"&gt;
          &lt;!-- Start Html Template --&gt;
          &lt;style&gt;
              .header
              {
                  color: red;
              }
          &lt;/style&gt;
          &lt;h1 class="header"&gt;Header Class&lt;/h1&gt;
          &lt;!-- End Html Template --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content h1
  {
      color: blue;
  }
  </code></pre>
  
  <p>The user would expect "Header Class" to be red as they do not know anything about the content css.  In my code i am using bootstrap but this shows a simplified version of the issue.  Normally, you would just make the CSS more specific but because the user doesn't know about bootstrap (or in the jsFiddle example content) we can't really expect them to modify the CSS.</p>
  
  <p>I need to try figure a way to either stop a certain container (preview div in the jsFiddle) using the stylesheet thats being used by it's parent or figure a way i can modify the bootstrap CSS so that overriding issues are less likely.</p>
  
  <p>Of course, sticking it in an iframe would accomplish this but then I will have issues trying to access and modify the preview.</p>
  
  <p>I am open to all ideas, just want to try find the most appropriate way to deal with this situation.  I found this rather difficult to put down on paper so I apologise if it is hard to understand.</p>