natalie stroud

Posted on Mar 27, 2019

CodePen isn't displaying correct colors

#help #beginners #codepen #codenewbie

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)

Nina • Mar 27 '19 • 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.

natalie stroud • Mar 27 '19

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

Tyler V. (he/him) • Mar 27 '19

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

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!

Tyler V. (he/him) • Mar 27 '19

This is a great article about CSS Specificity

CSS Specificity

Emma Wedekind ✨

#css

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.

natalie stroud • Mar 27 '19

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!

natalie stroud • Mar 27 '19

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

Michael Caveney • Mar 27 '19

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

natalie stroud • Mar 27 '19

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.

natalie stroud • Mar 27 '19 • Edited

Hi Michael!

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

DEV Community

CodePen isn't displaying correct colors

Top comments (9)

My debugging process

So why did this change anything?

CSS Specificity

Emma Wedekind ✨

Read next

React Memo Mayhem: Optimizing Functional Components

High Level requirements and purposes

Setup path aliases in React + Vite + TS Project 🤓

Upgrading Your Angular Application to it's latest