title: Can't override bootstrap to implement my own CSS
body: <pre><code>.lo:link, .lo:visited {
      color: #0060b6;
      text-decoration: none;
      background-color: transparent;
  }
  </code></pre>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
        {% for project in projects %}
        &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
            &lt;img src=&quot;{{ project.image.url }}&quot; height=&quot;250&quot; width=&quot;348&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              &lt;h4&gt;&lt;a class=&quot;lo&quot; href=&quot;{{ project.url }}&quot;&gt;{{ project.title }}&lt;/a&gt;&lt;/h4&gt;
              &lt;p class=&quot;card-text&quot;&gt;{{ project.description }}&lt;/p&gt;
              &lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
      &lt;/div&gt;
  </code></pre>
  <p>I'm trying to change the stuff in the <code>&lt;a&gt;</code> tag so it's not blue and highlighted.</p>
  <p>CSS links are in the right order - bootstrap first, then my own.</p>
  <p>I've also tried adding <code>!important</code> after each CSS property doesn't work.</p>
  <p>I'm using the Django block content method to have header and footer but that shouldn't make any difference.</p>