How do I tell a page to ignore internal CSS in favor of external CSS?

Question

Background: I'm updating the style of a page in a Rails app (the rails part shouldn't be relevant to this question, I hope), and I've added internal CSS in a style tag. Now I have the main parts of the page looking how I want them to look, but the bootstrap navbar also received the CSS changes, so the font size and many other aspects of the navbar are now changed, causing inconsistency with the rest of the site.

Question: Is there a way to tell the page not to apply the internal style to the navbar so it uses the external style instead?

Answer 1

Encapsulate your internal CSS inside of another class*. i.e. add a unique class to the container than holds all of your "main parts of the page" and then append that class to precede the selectors you write internal to the page

DEMO (example below)

a { color: green; } /* this style applies to all plain a tags */
.xyz a { color: red; } /* this style only applies to a tags within an xyz class */

<div class="nav">
  <a>I am a green link</a>
</div>
<div class="xyz">
  <a>This is a red link</a>
</div>

*as @isherwood mentions above, this would be leveraging specificity for your purposes