title: widget CSS conflicts with site CSS
body: <p>I build a widget for my website and I add CSS dynamically on loading but the problem is conflicting with the host website CSS file .
  The following code is for my widget which has CSS file attached on loading :</p>
  
  <pre><code>function main() {
      jQuery(document).ready(function($) {
      /******* Load CSS *******/
      var css_link = $("&lt;link&gt;", { 
              rel: "stylesheet", 
              type: "text/css", 
              href: "http://example.com/widget/green.css"
          });
          css_link.appendTo('head');
          var txt;
          txt='&lt;div id="wrapper"&gt;';
          txt=txt+'&lt;ul class="tabs"&gt;';
          txt=txt+'&lt;li id="fixtures_tab"&gt;&lt;a href="#fixtures"&gt;Hepsi&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="live_tab"&gt;&lt;a href="#live"&gt;Canlı&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="finished_tab"&gt;&lt;a href="#finished"&gt;Bitmiş&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="program_tab"&gt;&lt;a href="#program"&gt;Başlamamış&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="postpond_tab"&gt;&lt;a href="#postpond"&gt;Ertelenen&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="selected_tab"&gt;&lt;a id="f" href="#fav"&gt;Oyunlarım (0)&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;/ul&gt;';
          txt=txt+'&lt;div class="tab-container"&gt;';
          txt=txt+'&lt;div id="fixtures" class="tab-content"&gt;&lt;script type="text/javascript"&gt;get_All_Today_Matches();&lt;/script&gt;&lt;/div&gt;';
          txt=txt+'&lt;div id="live" class="tab-content"&gt;&lt;script type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;';
          txt=txt+'&lt;div id="finished" class="tab-content"&gt;&lt;script type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;';
          txt=txt+'&lt;div id="program" class="tab-content"&gt;&lt;script type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;';
          txt=txt+'&lt;div id="postpond" class="tab-content"&gt;&lt;script type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;';
          txt=txt+'&lt;div id="fav" class="tab-content"&gt;&lt;script type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;';
          txt=txt+'&lt;/div&gt;';
          txt=txt+'&lt;/div&gt;';
          $('#widget-container').html(txt);
      });
  } 
  </code></pre>
  
  <p>I want to know is there any way to isolate my widget's css ??</p>
  
  <p>by the way the main function is called from anonymous function (for isolation purpose)</p>
  
  <p>PS: I used css reset but it still the same problem .</p>