Hi everyone!
I just finished 'The Image Gallery' project from Colt Steele's Online WebDev bootcamp. Everything turned out the way I wanted while I was coding along and opening up the page in my browser, the colors display correctly. However, when I put the project on CodePen, the colors revert back to black/inverse navbar and gray text.
Any help is appreciated!
Top comments (9)
I can reproduce your results on browser and codepen so it's not anything wrong with just your viewing.
Changing the padding on the body works, but none of the colors work at all.
Oh!
Okay so I can't tell you what the primary issue is, but if you add !important after your declarations that share the bootstrap names it'll work.
My guess it that in codepen the bootstrap coloring is being called after the css for the codepen, so it's overwriting your colors. Not entirely sure, but yeah.
Thanks Nina! :) It looks like it was something with the bootstrap library and specificity.
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: 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.)<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.<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
.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.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, thegallery.css
file 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
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!
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.
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!!!!!!!!!!!!!!!!!!
Did you add any libraries you're using (such as Bootstrap) in the settings menu on the codepen?
So I came back to your comment and realized I didn't answer your question. I browsed through the settings and now it looks like the picture below. I saved everything but the color didn't change. I guess I didn't do it correctly.
Hi Michael!
I added in code at the beginning of my HTML under the title.