.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 attempting to modify the appearance of the content within the <a> tag to avoid it being blue and highlighted.
The CSS links are configured correctly - with Bootstrap loaded first followed by my own custom styles.
Even adding !important after each CSS property did not produce the desired result.
Although I am implementing the Django block content method with header and footer elements, this should not impact the styling issue.