CSS/Bootstrap Can't Change Pill Colors - html

Question

I can't for the life of me get the background colors or text colors to change on my navbar elements when using navbar-pills via bootstrap.
If I remove the pills element, the colors work correctly. I am getting the default blue pill with white text -- though the bold element is working on hover.
a:hover {
font-weight: 900;
}
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: green;
}
a.active {
color: #df4759;
background-color: #323232;
text-decoration: none;
}
<!-- Nav -->
<nav class="nav-pills navbar navbar-expand-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="">Contact Us</a>
</li>
</ul>
</nav>

Answer 1

Try this.
a:hover {
font-weight: 900;
}
a:link {
color: blue !important;
text-decoration: underline;
}
a:visited {
color: green;
}
a.active {
color: #df4759 !important;
background-color: #323232 !important;
text-decoration: none;
}

Answer 2

You do not have to use !important. While it does get the job done in this case, its use is arguable (read more here). All you really need to do is match the specificity of the bootstrap style declaration. If you simply inspect the element in your browser you will see the selector used is .nav-pills .nav-link.active. So you just need to use that same selector to override and be sure your styles are loaded after bootstrap. If the above set of style rules is just for this nav consider updating all your selectors as below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
nav-pills .nav-link:hover {
font-weight: 900;
}
.nav-pills .nav-link:link {
color: blue;
text-decoration: underline;
}
.nav-pills .nav-link:visited {
color: green;
}
.nav-pills .nav-link.active {
color: #df4759;
background-color: #323232;
text-decoration: none;
}
</style>
<nav class="nav-pills navbar navbar-expand-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="">Contact Us</a>
</li>
</ul>
</nav>