When faced with this issue, it's best to approach it by adding a custom file at the end of the head section and starting fresh rather than sorting through a massive 8000-line file that you may not be familiar with (or interested in learning).
One fundamental concept in CSS is that the last rule takes precedence:
p {color: red;}
p {color: green;}
<p>Hello world !</p>
<!--Text is green -->
Sometimes, however, this conventional wisdom doesn't seem to hold true:
body p {color: red;}
p {color: green;}
<p>Hello world !</p>
<!--Text is red -->
This often leads to using !important, which is generally discouraged:
body p {color: red;}
p {color: green !important;}
<p>Hello world !</p>
<!-- Text is green but !important can cause issues -->
So why does the second snippet result in red text?
The crucial concept here is CSS Specificity (article), which is often disregarded in CSS. Each selector has a "value" (1 for element, 10 for classes, 100 for ids, etc.) that are totaled and compared when conflicting rules arise. The rule with the higher specificity value takes precedence, regardless of its position in the code.
Examples of specificity:
p {color : red;}
/*Specificity : 1 */
#wrapper p.intro {color : green;}
/*Specificity : 100 + 1 + 10 = 111 */
.container p {color : orange;}
/*Specificity : 10 + 1 = 11 */
.container p.intro {color : blue;}
/*Specificity : 10 + 1 + 10 = 21 */
<div id="wrapper" class="container">
<p class="intro">Hello world !</p>
</div>
<!-- Text will be green! -->
To simplify matters, you can use your developer tools to identify the exact problematic selector, and if needed, add a specific selector to increase its specificity.
Personal tip: I prefer removing all font-family references from the original CSS file as managing them can be challenging even with specificity considered.
In conclusion, for a production site, it is advisable to consolidate all CSS assets into a compressed file.