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 trialmichael apprich
9,989 Pointscustom.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
231,060 PointsIt'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 -->
Doris Keller
Front End Web Development Techdegree Graduate 47,927 PointsHi 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
9,989 PointsIf 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
9,989 Pointsmichael apprich
9,989 PointsI 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.