I got struck at challenge 67

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; TECNO WX3P Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36.

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

2

The instructions are “add another background declaration right before the existing declaration and set its value to red”.

Just before the background: var(--red-color); line, you need to add a fallback - a simpler instruction that older browsers can understand if they can’t understand the later instruction. Because CSS is cascading style sheets, the older rule is applied until the later one works.

Set the background to red immediately before the line using a CSS variable.

Click me for the answer 

.red-box {

  background: red;

  background: var(--red-color);

  height: 200px;

  width:200px;

}
3

Thanks for the response sir.