CodePen isn't displaying correct colors

twitter logo github logo ・1 min read

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!

twitter logo DISCUSS (9)
markdown guide
 

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.

body {
    padding-top: 70px;
}

.flex {
    display: flex;
  flex-wrap: wrap;
}

.jumbotron {
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
}

.navbar-inverse {
    background: #2c3e50 !important;
}

.navbar-inverse .navbar-brand {
    color: white !important;
}

.navbar-inverse .navbar-nav>li>a {
    color: white !important;
}

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

  1. I removed the Javascript import to make sure your html links were working properly (They were).
  2. 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.)
  3. 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.
  4. 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>
  5. 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!

 

This is a great article about CSS Specificity

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.

Classic DEV Post from Oct 9 '18

What are your favorite VueJS libraries?

As my career has progressed I have filling a number of roles; backend(LEMP), th...

natalie stroud profile image
developer. Google Women Techmaker. LTUX co-organizer. Pearl Jam's biggest fan.