an external style sheet should override all style sheets and internal css

Question

I am using external style sheet more than one and internal css and also bootstrap predefined stylesheet. Now the problem is, I need 1 external style sheet would override all style sheets,internal css and inline css. how can i success it

Answer 1

You must use "!important" for your properties to override all styles

p {
    padding: 10px !important;
}

Answer 2

There is precedence to css styling methods. Inline styles takes precedence over internal css (using <style></style> tags) and external css (using <link /> tag).

To force properties use !important keyword after your property value.

Example: external.css

.home-page {
  background-color: green !important;
}

PS: Check this question for more info:

What is the order of precedence for CSS?

Answer 3

You need to add/import external css which should override all the styles at the bottom. First add/import bootstrap, then add/import other css files, then your css file which should override others.

When Adding/Importing css files, order is important. The file you add/import at last will override the previous styles.

If something doesn't work as you expected, then give them important like this

h1 {
    font-size: 25px !important;
}

In-line css rules always take precedence than other css rules/styles. In that case, you need to mark your rules with !important keyword.

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

Sourec: Details about precedence and css specificity is talked here