Compatibility with Browser fallback - need your help guys

Hi guys,

I need your help, because I am struggling with the exercise here:

https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks

How do I solve the challenge? What is the code?

Remember CSS is cascade language meaning styles overwrite styles that are written above it.

So give a background color of red to the line above other background declaration.

What is your current code? We would not give you the solution, but we can hint you in the right direction

That is my code so far:

<style>

background-color:red;

:root {

–red-color: red;

}

.red-box {

background: var(–red-color);

height: 200px;

width:200px;

}

</style>

<div class=“red-box”></div>

I really don´t know how to solve the challenge. I tried some other codes as well, but it doesn´t work.

You can’t have a css rule up there on its own, they always need to be inside curly brackets attached to an html selector (body, html, div, h1 are all html selector)

Considering that you need to make sure the background of the red box stay red even when variables don’t work, in which one of the existing selectors do you need to put that rule?

In the “.red-box”?

But how? I mean there are already curly brackets…

Then put it inside the brackets for that selector.

You have a css rule, specifically background-color:red; that is not inside any curly bracket
(Also in this case you need to use just background instead of background-color because of how the tests are built)

@ilenia:

I solved the lesson. It was easy, too easy. I thought too compliacted. :wink:

1 Like

image