How to set style priority?

Question

css

There is a site. My styles.css
is connected to it. Styles for
<p>, <a>, <li>
and so on are described there.
Bootstrap.min.css has recently been added to the same file , which describes the styles for the same tags.
The bootstrap style overrides my style, making the whole site look crooked.
I tried to write !important, but it does not behave quite adequately. Doesn't always work.
I tried to include my file after bootstrap.min.css. It still doesn't cover.
Maybe there is some way to leave only the styles you need in bootstrap.min.css?
If so, how can they be detected automatically? The view script takes 50 styles, no less. Manually it is unrealistically long.
Question: How do I prioritize my styles.css?

Answer 1

1) include your style after bootstrap
2) getbootstrap.com/customize uncheck Typography here. Well, you can also clean up the rest and leave only what you need the bootstrap for.

Answer 2

Already said
1) connect your style after the bootstrap
2) on the site you can select the elements that you need and only they will be in css
If you still need to override them (it will take more time), and not rewrite some, then Cascading
That is, if you have:
Then:
Has > effect
So look at the sources and override, because most of the styles in bootstrap look like this

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

Answer 3

It is very well described why the styles below do not override those that came before it is described here www.quizful.net/post/specificity-of-css-selectors
It makes sense to look at how the style is specified in the bootstrap file and make your rules take precedence.
But, it is better to take only the necessary components from BS. Most likely, you don’t need anything other than the grid, but users have to load extra styles.