title: Overwriting CSS from CSS library (Bootstrap)
body: <p>My main issue with using CSS libraries is that they often overwrite custom CSS styles that I specifically set. For example, here I have a list that exists within a Bootstrap expand/collapse menu:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
     &lt;li&gt;
        &lt;a href="#" style=""&gt;&lt;img src="images/arrow.gif" style="width: 20px;"&gt;Link A&lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to set my own font color, so I use the following CSS:</p>
  
  <pre><code>nav li {
    font-size: 16px;
    color: #004687;
  }
  </code></pre>
  
  <p>But when I view in Firefox's Inspector, I see the color I have chosen is being overridden by Bootstrap.</p>
  
  <p>My custom CSS occurs <strong>after</strong> the Bootstrap files have been loaded in the  of the HTML document.</p>
  
  <p>How do I prevent this happening without setting <code>style="color: #004687"</code> to every element?</p>
  
  <p><strong>EDIT:</strong> Thanks for the suggestions thus far, but none have been successful. I'm pasting the full original code to give you greater detail:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;header class="navbar navbar-static-top bs-docs-nav"&gt;
        &lt;div class="col-md-4 visible-xs" id="mobile-nav-outer"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
            &lt;a href="../" class="navbar-brand"&gt;Menu&lt;/a&gt;
          &lt;/div&gt;
          &lt;nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;
                &lt;a href="#" class="nav-mobile-link"&gt;&lt;img src="images/arrow.gif" style="width: 20px;"&gt;Link A&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
          &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is included like this:</p>
  
  <pre><code>  &lt;head&gt;
      &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="bootstrap/css/docs.min.css" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          #mobile-nav-outer {
            border: 1px solid #CCC;
            background-color: #FFF;
          }
          #mobile-nav-inner {
            border: 1px solid #CCC;
            background-color: #FFF;
            margin: 3px;
          }
          nav li {
              font-size: 16px;
              color: #004687;
          }
          .nav-mobile-link {
              font-size: 16px;
              color: #004687;        
          }
      &lt;/style&gt;
    &lt;/head&gt;
  </code></pre>
  
  <p><strong>EDIT 3:</strong>  I have found a cheap workaround by using ID's rather than classes which works due to CSS specificity (ID's override classes). This isn't a very clean solution and I'd still like to know why I cannot override the Bootstrap classes with my own.</p>