title: how to isolate CSS in a website gadget?
body: <p>I have a livescore website and I am trying to make a gadget of that website to show part of it in others websites,the problem that I face is how to isolate my code (JavaScript and CSS) from the code of the host site for my gadget.
  I use an "anonymous function" like this:</p>
  
  <pre><code>(function() {
  
  // Localize jQuery variable
  var jQuery;
  
  /******** Load jQuery if not present *********/
  if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {
      var script_tag = document.createElement('script');
      script_tag.setAttribute("type","text/javascript");
      script_tag.setAttribute("src",
          "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
      if (script_tag.readyState) {
        script_tag.onreadystatechange = function () { // For old versions of IE
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                scriptLoadHandler();
            }
        };
      } else { // Other browsers
        script_tag.onload = scriptLoadHandler;
      }
      // Try to find the head, otherwise default to the documentElement
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
  } else {
      // The jQuery version on the window is the one we want to use
      jQuery = window.jQuery;
      main();
  }
  
  /******** Called once jQuery has loaded ******/
  function scriptLoadHandler() {
      // Restore $ and window.jQuery to their previous values and store the
      // new jQuery in our local jQuery variable
      jQuery = window.jQuery.noConflict(true);
      // Call our main function
      main(); 
  }
  
  /******** Our main function ********/
  function main() { 
      jQuery(document).ready(function($) {
      /******* Load CSS *******/
      var css_link = $("&lt;link&gt;", { 
              rel: "stylesheet", 
              type: "text/css", 
              href: "http://localhost/aaa/widget/widget.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;All&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="live_tab"&gt;&lt;a href="#live"&gt;Live&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="finished_tab"&gt;&lt;a href="#finished"&gt;finished&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="program_tab"&gt;&lt;a href="#program"&gt;Program&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="postpond_tab"&gt;&lt;a href="#postpond"&gt;Postpond&lt;/a&gt;&lt;/li&gt;';
          txt=txt+'&lt;li id="selected_tab"&gt;&lt;a id="f" href="#fav"&gt;Selected (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);
      });
  }
  
  })(); // We call our anonymous function immediately 
  </code></pre>
  
  <p>everything is going fine for the JQuery but not for CSS (the CSS file is loaded and worked fine but some of the hosting site CSS is effecting my CSS) I have no control on the hosting site CSS and I think that I have isolated my code well by using anonymous function but why is my CSS affected by the website orginal CSS ??? help me please i have been at this point for a while</p>