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


Tags: html,css,twitter-bootstrap,css-specificity

Problem :

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?

Pardon me if this is an ill formed question, or just something you can't even remotely do / shouldn't do with CSS, I'm very new to using CSS with HTML and still gaining my bearings. Thanks in advanced for any help!



Solution :

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


    CSS Howto..

    How to change menu icon when scrolling to specific sections of the website?

    How to fix my nav bar? Positioning is different on different screens

    How can i make this image out of viewport without trigering an overflow scrollbar?

    How to add an icon to a button at the bottom right corner

    How to loop animated text banners using css keyframes

    How to functionalize countdown?

    How to make this text bigger?

    how to make div with one line of text and div with two the same height?

    How to figure out if CSS transition is about to happen?

    How to get the same height on two Bootstrap columns? [duplicate]

    Is it possible to change somehow color profile in css

    How to use Bootstrap CDN?

    How to spin css cube each after each [closed]

    jQuery .css, how to translate it into Javascript

    How to put css class in to html:select element in jsp

    How to mimic in CSS
    HTML <table border="2" cellpadding="5" cellspacing="0" width="40%"> <tr><td> aaa </td><td> bbb </td></tr> <tr><td> ccc </td><td> ddd </td></tr> </table> <br/> <table class="mytable"> <tr><td> aaa...
    Read more

    How to design “overflowing” border lines of css
    ?

    how to stop css/jquery rotation

    Fade in/out text slideshow

    How do I override the default way Wordpress' determines the .current-menu-item class?

    How to over ride the transparency aspect in CSS

    How to select list item by its contents?

    How can I apply jQuery .css style to descendant div [closed]

    How can I skin / theme a windows forms application [closed]

    How to automatically resize a div based on background image size?

    How can I get these two divs to appear close to each other vertically?

    How to load CSS using jquery

    How can I allow resizable() to increase size beyond initial size?

    How to make textfield stick to its label in extjs?

    How to draw a checkmark / tick using CSS?