title: Call a new CSS file on button click - but keep existing styles
body: <p>I have a page with a couple CSS files.   I want to call a new CSS file (not present on page load) when a button is clicked.  I want the other CSS files to remain unchanged though.</p>
  
  <p>This works - but, it seems to replace ALL the css files and ONLY pulls styles from the new one I call.  How can I keep the existing styles in place and only override what I'm targeting in this new file?</p>
  
  <pre><code>$(function () {
      $('button').click(function () {
          $('link').attr('href', 'foo.css');
      });
  });
  </code></pre>