Custom CSS not being applied

Question

I can not get the custom CSS to apply to the webpage over the bootstrap CSS. I have the link element added directly below the bootstrapp CDN link. I created a new fold called css, added a new file type named custom.css, and then wrote out the css code for targeting .navbar .navbar-brand and the .jumbotron. I can not find where there is a mistake and why this is not working. Below is the code I have.

In index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" href="css/custom.css"> </head> <body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">

<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary fixed-top"> <div class="container"> <a class="navbar-brand order-1 mr-0" href="https://www.treamtreehouse.com" target="_blank">Presented by Treehouse</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="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#speakers">Speakers</a> </li> <li class="nav-item"> <a class="nav-link" href="#schedule" tabindex="-1" aria-disabled="true">Schedule</a> </li> </ul> </div> </div> </nav>

<div class="jumbotron jumbotron-fluid bg-info text-white"> <div class="container text-sm-center pt-5"> <h1 class="display-2">Full Stack Conf</h1> <p class="lead"> A one-Day Conference About All Things Javascript!</p>

     <div class="btn-groupmt-4" role="group" aria-label="Callout buttons">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#register">Register Now</button>
      <a class="btn btn-light btn-lg" href="#speakers">See Speakers</a>
    </div>

</div> </div>

In custom.css: .navbar .navbar-brand { color: rgba(255,255,255,0.85); font-size: 1rem; }

.jumbotron{ background-image: url('../img/jumbo-bg.jpg'); background-size: cover; }

Answer 1 · 2020-04-02T22:15:40Z

April 2, 2020 10:15pm

Bootstrap styles are tricky to override and trying to override them with the same class names that Bootstrap uses won't work. Your Bootstrap CDN link is before your Custom CSS link (as it should be) but due to this it will always load and prioritize first the Bootstrap styles first on those class names. It's also worth mentioning that there is an order of selectivity in CSS. Meaning if you applied the styles to a much more specific selector, it will more likely work than just using a class name. An ID is higher on the order of specificity than a class. You could try giving the container where .navbar-brand is an ID and then applying the styles to that.

If that's doesn't work then its still not specific enough, and you can always add those styles as inline styles in the HTML:

Here's an image showing CSS selectors charted by their specificity, you'll see that inline CSS is the 2nd most selective: http://www.standardista.com/wp-content/uploads/2012/01/specificityimg.png

Here's the same probem answered on StackOverflow: https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles

Welcome to the Treehouse Community

Looking to learn something new?

Spencer Renfro

Spencer Renfro

Custom CSS not being applied

1 Answer

Nicole Antonino

Nicole Antonino