Have 2 CSS files on page but give the first one priority

Question

I'm working with a WordPress theme and I need to use Bootstrap for a certain page.

The page header includes these two styles:

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="bootstrap.min.css">

Is there a way to avoid using bootstrap if the style is defined in default.css?

Or is making each line !important in the first one the only available option?

Just swap the order of inclusion of both files. Given both files specify selectors with the same specificity, the latter defined wins. *Is there a way to avoid using bootstrap if the style is defined in default.css?* - No, there's no technical way. Usage of `!important` is no option either. — connexo, Apr 14 '20 at 16:50
this is a little more complicated, this can help: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Yukulélé, Apr 14 '20 at 16:50
take a look at this. https://stackoverflow.com/questions/3671551/is-it-possible-to-give-one-css-class-priority-over-another — mosharaf13, Apr 14 '20 at 16:51
Does this answer your question? [Understanding CSS selector priority / specificity](https://stackoverflow.com/questions/4072365/understanding-css-selector-priority-specificity) — Diogo Almiro, Apr 14 '20 at 16:52
Using `!important` is one (hacky) way to increase specificity, but there are other ways (see the linked duplicate question). If I remember bootstrap correctly, you should be able to override styles by adding 2-3 CSS classes to your HTML structure and then using those. — Henry Woody, Apr 14 '20 at 17:23

score 0 · Answer 1 · answered Apr 14 '20 at 16:56

You can use !important. If you add the important keyword after a css property it will override the others.

for example:

.id{ 
  color: red;
}

.other-id{ 
  color: blue !important;
}

<p class="id other-id">test</p>

In this example the color chosen will be blue because this property is tagé !important.

score 0 · Answer 2 · answered Apr 14 '20 at 16:59

0

add !important to modified existing class or id in bootstrap.css,

if you don't feel like modify the class or id,

Simply change the class name (in div) and "design" it with ur default.css

answered Apr 14 '20 at 16:59

H.Saz

2 Answers2