tl;dr - It's because CodePen's styles take effect before your imported stylesheets -- working codepen
This is a tricky issue to diagnose, so I'll walk you through the steps I took (explanation at the end on the error):
My debugging process
I removed the Javascript import to make sure your html links were working properly (They were).
I added background-color: deeppink to your .navbar-inverse class (This is my default debugging color because it's [thus far] always been significantly more obvious than other elements on the page.)
I used the Chrome Debugger tools (Right click > Inspect or f12) and navigated to the <nav> to make sure the class was applying correctly. I noticed that it was applying, but another instance of .navbar-inverse was overwriting it with the default coloring.
I moved <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> into Pen Settings > HTML > Suff for <head>
The navbar is now pink!
So why did this change anything?
When there are multiple .css sources, the page needs to apply them all, but it also needs to determine what order to apply class styles if they come up more than once. You can see this within an .html file by using the following and observing which color/background color are applied.
<!-- index.html -->
<body>
<p> This is an example paragraph </p>
</body>
<style>
p {
color: black;
background-color: deeppink;
}
p {
color: white;
background-color: rebeccapurple;
}
</style>
Within a single styling file, it works top to bottom. The same is true when it comes to importing .css files. The order they show in the html file (top to bottom) is the order they are applied. On your local machine, the gallery.css file is importing after the bootstrap. When you moved to codepen and added what I assume was the code from gallery.css, it was now taking effect before the bootstrap css import.
Moving the link into the html settings, Codepen will then know to apply the bootstrap css then the codepen CSS box.
Hope this helps clarify what was happening! If you have further questions, let me know!
AH! Thank you! I figured it was something to do with that. And then Michael mentioned putting the library in the settings so I figured that's what it was.
I just uploaded a landing page example from the bootcamp and the exact same thing happened. So I tried your suggestion on the landing page and it worked!! I'm going to go back to this pen now and try the same thing. Thank you for your help!
Don't worry about knowing everything in this article (It's a TON of information). You'll pick up on it over time as you work with CSS, I just know Emma does a better job explaining it than I can over my lunch break.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Natalie!
tl;dr - It's because CodePen's styles take effect before your imported stylesheets -- working codepen
This is a tricky issue to diagnose, so I'll walk you through the steps I took (explanation at the end on the error):
My debugging process
background-color: deeppinkto your.navbar-inverseclass (This is my default debugging color because it's [thus far] always been significantly more obvious than other elements on the page.)<nav>to make sure the class was applying correctly. I noticed that it was applying, but another instance of.navbar-inversewas overwriting it with the default coloring.<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">intoPen Settings > HTML > Suff for <head>So why did this change anything?
When there are multiple
.csssources, the page needs to apply them all, but it also needs to determine what order to apply class styles if they come up more than once. You can see this within an.htmlfile by using the following and observing which color/background color are applied.Within a single styling file, it works top to bottom. The same is true when it comes to importing
.cssfiles. The order they show in the html file (top to bottom) is the order they are applied. On your local machine, thegallery.cssfile is importing after the bootstrap. When you moved to codepen and added what I assume was the code fromgallery.css, it was now taking effect before the bootstrap css import.Moving the
linkinto the html settings, Codepen will then know to apply the bootstrap css then the codepen CSS box.Hope this helps clarify what was happening! If you have further questions, let me know!
AH! Thank you! I figured it was something to do with that. And then Michael mentioned putting the library in the settings so I figured that's what it was.
I just uploaded a landing page example from the bootcamp and the exact same thing happened. So I tried your suggestion on the landing page and it worked!! I'm going to go back to this pen now and try the same thing. Thank you for your help!
IT WORKED AGAIN! THANK YOU!!!!!!!!!!!!!!!!!!
This is a great article about CSS Specificity
CSS Specificity
Emma Wedekind ✨
Don't worry about knowing everything in this article (It's a TON of information). You'll pick up on it over time as you work with CSS, I just know Emma does a better job explaining it than I can over my lunch break.