CiviCRM CSS doesn't appear to be used when viewing live pages
CiviCRM does use the .crm-container and other similar classes in its templates, which helps to isolate the CSS styles (sometimes for better, sometimes for worse). The main problem I have found, especially with Bootstrap themes, is Bootstrap taking over the .label class, and CiviCRM not using a class name such as .crm-label. I've found a relatively easy fix to be using a custom CSS file that is linked from the Settings - Resource URLs administration page. For example, our document is at [cms.root]/sites/default/files/custom_civicrm.css, and contains this code (among other overrides):

div.crm-container label {
  color: #333333;
  font-weight: normal;
  font-size: 1.2em;
}


As I have discovered other strange interactions between the theme and CiviCRM, I've used Chrome to Inspect the CSS to find the class that is just specific enough to cover all of the style that needs to be fixed.