I'm completely new to coding and I've decided to dive into the world of Bootstrap. However, I'm facing a hurdle: I can't figure out how to customize the default Bootstrap styles with my own CSS.
After researching online, here are the common suggestions I found:
1. Link your custom stylesheet after Bootstrap.
2. Be more specific in your CSS selectors than Bootstrap (for example, using navbar-link a instead of just a).
3. Avoid using !important in your CSS declarations.
Despite trying all of these approaches, I'm still struggling to see my CSS changes taking effect. Can someone point me in the right direction?
Below is an example involving a navigation bar and links. While the background color works fine, the stylings for the a elements don't seem to apply. I experimented with different levels of specificity in my selectors without success.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- My custom CSS below -->
<link rel="stylesheet" href="CSS/main.css" type="text/css">
<title>ML</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="img/logo-small.png" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:visited {
color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link a {
color: #db5461;
}