title: Why is CSS not styling this Bootstrap webpage?
body: <p>I'm trying to change the color of the link with the class "navbar-brand" in my Bootstrap website. No matter how I structure my css selector I can't seem to change the text color. However, I know the css is being loaded because I'm able to change the background color of the navbar. Here is the shortened code:</p>
  
  <p>My index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#"&gt;Foobar Brand&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My main.css:</p>
  
  <pre><code>    // change the color of the navbar to a dark blue
      .navbar {
          background-color: #3c4c66;
      }
  
      // some of the selectors I've tried to get the text to be white.
      // why are they not working?
      .navbar-brand {
          color: white;
      }
  
      .navbar-header a {
          color: white;
      }
  
      a {
          color: white;
      }
  </code></pre>
  
  <p>End result: a dark blue bar with the gray text that came with the default navbar. Thanks for your help.</p>
  
  <p>Edit: the similar question <a href="https://stackoverflow.com/questions/24420080/change-navbar-text-color-bootstrap">here</a> didn't help me. I was able to change the elements of the navbar-nav, but not the navbar-brand.</p>
  
  <p>Edit 2:
  In response to Abhinav Guaniyal's comment, I inspected the element in Firefox. Indeed, somehow the .navbar-brand rule in Bootstrap is overriding  (sorry if that is the wrong term) the .navbar-brand in my css file. Why is this? Shouldn't my css file override Bootstrap's since I linked main.css after Bootstrap?</p>