How to change background Color on the Intro to Chrome Devtools Page

I am currently at the Chrome Dev Tools Introduction:
https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-web-development-fundamentals/modules/fecp-developing-with-css/videos/intro-to-chrome-devtools

I tried to use the Dev Tools to change the Background of this Page. For that i selected the main part of the page:

I then searched the CSS for background-color:

If i change the background-color property of the body directly (not the variable) nothing is changing.
If i change the color of the variable --color-background only the font color of the next button is changing, but nothing else.
image

That’s super confusing to me. Anyone able to shed some light?

Hi, it is a little bit confusing since they are using variables to define their color palette. I tried it and it worked, the easiest way would be to inspect the element that you want to change the color, then go to its style, then hit the plus button to add your new color property.
I tried to change this page’s background to blue and here is the result:

Screenshot 2021-06-23 at 15.22.45

Hey Chris,

if i set the background color for the class directly it changes (just like for you), i just dont understand why it’s not changing when editing the variable or the background color of body.

My guess is that it’s getting overwritten somewhere. I just cant find out where exactly.

Hope someone from codecademy who made the page can shed some light :smiley:

1 Like

Yes that was also what I thought, since all these global CSS color variables are declared using the root selector which also has a higher specificity. It might be because of that.