title: How to Prevent My CSS From Clashing With Facebook's CSS?
body: <p>I have the following HTML on my page:</p>
  
  <pre><code>&lt;div id="mypanel"&gt;
     &lt;span&gt;SomeText&lt;/span&gt;
     &lt;span&gt;SomeText2&lt;/span&gt;
     &lt;span&gt;SomeText3&lt;/span&gt;
     &lt;span&gt;SomeText4&lt;/span&gt;
     &lt;fb:login-button ..snip.. /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see there i have some Facebook Markup Language (FBML) for the Login button.</p>
  
  <p>Which get's rendered as:</p>
  
  <pre><code>&lt;span id="RES_ID_fb_login_text" class="FBConnectButton_Text"&gt;Login with Facebook&lt;/span&gt;
  </code></pre>
  
  <p>Now, Facebook have the following CSS Selector in their CSS: "<code>.FBConnectButton_Text</code>" to style the FB Connect Button. Fine.</p>
  
  <p>But, my issue is, im trying to style other items (my elements) around that, which is causing the Facebook Controls to be styled incorrectly.</p>
  
  <p>In the above example (which is greatly simplified of course), i want to style all <code>&lt;span&gt;</code> elements in the <code>&lt;div&gt;</code> called "mypanel", so i write the following CSS:</p>
  
  <pre><code>#mypanel span
  {
      font-weight: bold;
      font-size: 14px;
  }
  </code></pre>
  
  <p>And what happens? Well, the Facebook Connect button is getting these styles applied to it also (bad). </p>
  
  <p>I would <strong>think</strong> they would have a "reset"-style CSS sheet which would specifically set these font's to their needs (like we do on our site).</p>
  
  <p>So i end up having to apply classes to all my spans to avoid Facebook controls getting messed up. Considering i have these FB controls all over my site, it's quite a pain to "work around" Facebook.</p>
  
  <p>Can you guys think of a better way to handle this?</p>