Can't override bootstrap to implement my own CSS - css

Question

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

Answer 1

You should use id instead of class, because id has a higher priority than class:
#lo:link, #lo:visited {
color: #0060b6;
text-decoration: none;
background-color: transparent;
}

Answer 2

Override the property this way:
.lo:link, .lo:visited {
color: #0060b6;
text-decoration: none;
background-color: transparent;
}

Answer 3

In bootstrap, <a> tag has its own rules which can be overridden easily.
a {
color: #007bff; /* change to the color you want */
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3; /* change me as you like */
text-decoration: underline;
}
Also, I gave it a try using your style.And it did work for me in a new project which means, you need to check what's preventing it from changing? maybe it's about the CSS specificity

Answer 4

SOLVED! thanks, I really did try everything for 4 agonizing days, it turns out it was in settings.py (using django) STATIC_URL was set to a specific directory so I just had to put my custom css in there, reference that in html and it worked