I can't understand why my bootstrap custom CSS is being overridden - html

Question

I've been learning CSS for a few months and I'm trying to build a practice website using bootstrap as well. I've selected a nav-bar and want to code page links that will change color based on which page is currently open. I'm doing this by making a class for each link called "activePage" and coding a CSS selector for that class in my custom styles.css
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="activePage" href="index.html">News</a></li>
<li>Tour Dates</li>
<li>About</li>
<li>Discography</li>
<li>Other Media</li>
</ul>
<div align = "right" class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-github"></i></li>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-tumblr"></i></li>
<li><i class="fa fa-lg fa-youtube"></i></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
As you can see for HTML page I have a class on the nabber for the active page called "activePage"
For now i have
a.activePage {
color:blue;
}
as the CSS rule, but nothing shows up. Here's the odd thing When I hit inspect element to see what CSS rules are being applied to links I get this.
http://imgur.com/85REHsw
It says that a.activePage is the most specific selector, but for some reason the color of the text is being determined by .navbar-inverse .navbar-nav>li>a in bootstrap.css. Why is this happening. If my CSS knowledge is correct (and it may very well not be) those selectors should only effect things directly inside the div, things inside a custom class I created should override those selectors. Why is it not happening?
Btw I've tried moving the CSS selector all throughout the stylesheet, I've tried specifying li.activePage instead. I've tried putting it in bootstrap.css (it's not the stylesheet itself, other rules have been applied correctly) It seems that there is something I'm not understanding here.

Answer 1

Your style sheets should be linked in this order:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/customstyles.css" rel="stylesheet">

Answer 2

Considering Specificity
This is occurring due to CSS Specificify Rules, which govern how styles target certain elements and how decisions are made regarding conflicts should be resolved between them.
The Bootstrap style that is being applied to your element more specifically describes the element it is targeting as you can see by the multiple nesting :
.navbar-inverse .navbar-nav li a {
color: #9d9d9d;
}
This is much more specific than the broad style that you are currently using :
a.activePage {
color: blue;
}
Possible Approaches for Overriding
There are a few ways to ensure that your style properly overrides the existing Bootstrap one :
Ensure that your style is defined after your Bootstrap reference (this is very important if not using the !important option below)
Make your style more specific (e.g. .navbar-inverse .navbar-nav li a.activePage)
Consider using an !important modifier to your style to give your style precedence.
You can work around this quite easily to ensure that you want your style to be applied by using the !important modifier :
/* Example using a more specific style */
.navbar-inverse .navbar-nav li a.activePage {
color: blue;
}
/* Example using the !important modifier */
a.activePage {
color: blue!important;
}