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

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?

htmlcsstwitter-bootstrapcss-specificity


Solution 1:[1]

I came up with these two solutions:

The first solution is manage an order of links. The latest definition will be applied to a page:

<style>
    body {
        background-color: red;
    }
</style>

<link rel="stylesheet" href="./main.css">

main.css:

body {
    background-color: green;
}

Then the page's body will be red backgrounded.

The second solution is just delete a <style> element using JQuery or whatever.

P.S.: I am not sure about the second solution's quality.

Solution 2:[2]

You can use the CSS The !important Rule on your classes in the external css file, look at the example below

.myclass {
  color: blue!important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p style="color:red;" class="myclass">This is currently using external css </p>


</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood
Solution 2 Kaddu Livingstone

Related Questions