Custom css does not overwrite properties in first css file - html

Question

I'm working with bootstrap, but I wanted to change a few of the colors around (navbar and buttons). I have an un-modified bootstrap.css, and a custom.css that changes all of the properties that I want changed from the default.
In my index.html, I link the default bootstrap, and then the custom css file.
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="bootstrap/css/custom.css" rel="stylesheet" type="text/css"/>
I'm new to web stuff, but my understanding is that style sheets add to each other in the order they are linked. But when I open it in a browser, it doesn't use any of the changes specified in custom.css. Is my understanding wrong, or am I just going about this incorrectly?
Edits:
Original navbar-inner (bootstrap.css)
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa; /* #fafafa */
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); /*#f2f2f2 */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
navbar-inner with a few properties modified in custom.css
.navbar-inner {
background-image: -moz-linear-gradient(top, #002f6c, #002f64);
background-image: -ms-linear-gradient(top, #002f6c, #002f64);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#002f6c), to(#002f64));
background-image: -webkit-linear-gradient(top, #002f6c, #002f64);
background-image: -o-linear-gradient(top, #002f6c, #002f64);
background-image: linear-gradient(top, #002f6c, #002f64);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'002f6c, endColorstr='#'002f64, GradientType=0);
}
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test</a>
<ul class="nav pull-right">
<li class="pull-right">About</li>
<li class="pull-right">Contact</li>
</ul>
</div>
</div>
</div>
Do the first div classes also need to be changed? (They aren't)
I used this tool to generate the custom.css file.

Answer 1

Saying that CSS styles stack in the order they are applied isn't necessarily a correct one. CSS is applied in order of importance, or specificity.
For example, consider the following HTML:
<ul id="testList">
<li>Some data</li>
</ul>
If your first file has the CSS:
ul#testList { color: #f00; }
and your second file has:
ul { color: #00f; }
Then your first file has more specificity, even though the second file comes second in your markup. The first style is more precise in its declaration.
If however, you change your second style to have matching specificity, then your second declaration will override the first. Hope this helps!

Answer 2

Edit:
It turns out that the tool I used does not change every property required! It should have also changed the .navbar-inverse class. After applying changes there, it works as expected.
In other words, both files were linked correctly.
Thanks for the answers though! I certainly learned a few new things.