Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Building Forms With Bootstrap Add Custom CSS to Your Bootstrap Site

Posted by michael apprich
michael apprich
9,989 Points

custom.css is not being recognized by the browser at all

It appears my styles in the custom.css file are not being recognized by the browser at all. Upon inspecting any element whose styles are supposed to be overridden by the custom css, there is no trace of the styles from that file. The custom.css file is below the bootstrap file in the head section. I'm kind of at a loss. Not sure what the deal is or what it could be.

  <head>
    <title>Full Stack Conf</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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 ref="stylesheet" href="css/custom.css">
  </head>

Rules from 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;
}

html <a> element being targeted by the first rule

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
      <div class="container">
        <a class="navbar-brand order-1 mr-0" href="http://teamtreehouse.com" target="_blank">Presented by Team Treehouse</a>

When I inspect this element, there are only bootstrap css rules being applied. No sign of any rules from custom.css

3 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It's just a typo where the link element has an attribute "ref" instead of "rel":

    <link ref="stylesheet" href="css/custom.css">  <!-- current code -->
    <!--    ^     -->
    <link rel="stylesheet" href="css/custom.css">  <!-- correct code -->
michael apprich
michael apprich
9,989 Points

I must have looked at this 20 times because I knew it had to be something with the link but my brain just could not notice that "l" instead of "f". Thank you Steven Parker.

Doris Keller
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Doris Keller
Front End Web Development Techdegree Graduate 47,927 Points
Doris Keller
.a{fill-rule:evenodd;}techdegree seal-36
Doris Keller
Front End Web Development Techdegree Graduate 47,927 Points

Hi michael apprich I'm not working with bootstrap as a rule, thus, I'm not absolutely sure about my theory - but as bootstrap involved over the years, it might have become more challenging to override those rules and what worked when the video was created, might not work anymore.

There was a similar question about two years ago - maybe it helps: https://teamtreehouse.com/community/custom-css-not-being-applied

michael apprich
michael apprich
9,989 Points

If bootstrap was overriding my custom css, it should show up in the inspector as being overridden shouldn't it? It's not even showing in the inspector which leads me to believe it's something else.

Steven Parker, do you have any ideas?

michael apprich
michael apprich
9,989 Points
michael apprich
michael apprich
9,989 Points

https://w.trhou.se/rzlhqjc6o8