DEV Community

natalie stroud
natalie stroud

Posted on

CodePen isn't displaying correct colors

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)

Collapse
 
misnina profile image
Nina • Edited

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.

Collapse
 
nataliecodes profile image
natalie stroud

Thanks Nina! :) It looks like it was something with the bootstrap library and specificity.

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

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!

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

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.

Collapse
 
nataliecodes profile image
natalie stroud

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!

Collapse
 
nataliecodes profile image
natalie stroud

IT WORKED AGAIN! THANK YOU!!!!!!!!!!!!!!!!!!

Collapse
 
dylanesque profile image
Michael Caveney

Did you add any libraries you're using (such as Bootstrap) in the settings menu on the codepen?

Collapse
 
nataliecodes profile image
natalie stroud

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.

Collapse
 
nataliecodes profile image
natalie stroud • Edited

Hi Michael!

I added in code at the beginning of my HTML under the title.