Learn CSS Variables by Building a City Skyline - Step 23

Tell us what’s happening:
Its not wokring… Ive tried every possible combination… Whats going on?
background-color: var(–variable-name, fallback-value) green. This is the issue?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>

  <body>
    <div class="background-buildings">
      <div></div>
      <div></div>
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1b {
  width: 80%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1c {
  width: 90%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1d {
  width: 100%;
  height: 70%;
  background-color: var(--building-color1);
}
.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--building-color2);
  background-color: var(--variable-name, fallback-value) green ;
}
.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}
    

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Learn CSS Variables by Building a City Skyline - Step 23

Link to the challenge:

instead of adding a whole new line of code, just modify this line of code which is the background-color

The whole lesson’s point is to teach you how to specify a fallback color or in other words, how to specify a back-up color so that if the var method fails to load the color variable you specified, you can see the fallback (backup) color instead.

Therefore, delete the extra line of code added, then
add green next to the --building-color2 as per the template shown in the exercise to identify green as your backup color.

Hi thanks for replying. The issue I had was the fall color.

background-color: var(–building-color2, fallback-value);
The issue is with freeocodecamp explanations. It be better if they wrote… Please add in the value in the missing section xxxxxxxx. Like this i give two scenarios they could use.

background-color: var(–building-color2, Place color here);
background-color: var(–building-color2, xxxxxxxxxx );

I solved it now though. Be great if they highlighted that - fallback-value - should not be typed at all.

hi there,

I checked to see the exercise instructions and they were quite clear in my opinion.
Here’s the template they gave:

var(--variable-name, fallback-value)

I think you can see that the word --variable-name is something you should replace and therefore fallback-value is also something you should replace.

I’m glad you figured it out though.
If you have other concerns about the exercise, you can open a github issue to discuss it.