Learn CSS Variables by Building a City Skyline - Step 15

Greetings my fellow campers
please i need immediate help on this, this is really a thorn on my skin
how do i go about it my code is visible

  **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 class="bb1">
      <div class="bb1a"></div>
      <div class="bb1b"></div>
      <div class="bb1c"></div>
      <div class="bb1d"></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%;
}

.bb1 {
width: 10%;
height: 70%;
display: flex;
flex-direction: column;
align-items: center;
--building-color1: #999;
}
.bb1a {
width: 70%;
height: 10%;
background-color: var(--#999);
}
.bb1b {
width: 80%;
height: 10%;
}

.bb1c {
width: 90%;
height: 10%;
}

.bb1d {
width: 100%;
height: 70%;
}
  
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

Hey!

This is the hint that shows up when i try to run your code.

Hint:
You should use var(--building-color1) to set the background-color of the .bb1a element.

so make sure you’re using the correct syntax for CSS variables as well as the correct value for the variable here.

i have used several rules i have turned it upside down i still don’t it right

i don’t where i am getting it wrong

The issue is with the value for your background-color property.

that’s why i am here bro!..i have tried several rules still don’t know the loop hole

You’re using the wrong syntax for a css variable. You’re supposed to use the --building1-color1 variable but you’re using --#999 which is causing the error

that value was given by them

In the hint, it shows how the value for background-color: is supposed to be.
Check your value and see if you spot any difference with the hint.

Have you tried it as a solution yet?

now i just used this
var(–building-color1,#999);
it suppose to work isn’t it

now i just used this
var(–building-color1,#999);
it is supose to work

That still won’t work because i have no idea how where you’re getting the value #999

Most of the tests expect you to enter a specific value which in a way isn’t fair because there are atleast a million ways to accomplish the same thing in CSS or programming in general. But as a beginner and to pass the tests, you need to do exactly what the hints say or else you won’t pass the tests.

it’s in the step
“To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name) . Add your variable as the value of the background-color property of the .bb1a class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of #999 . So #999 will be used as the value for the background-color property.”

Yes, read this part.

That just means that when you use the --building-color1 variable, its name will be substituted for the value #999, you do not have to manually do it.

We can give direct hints like this?
Can i tell him what to do without writing the code?

please help it’s getting frustrating

well i think that won’t be of help because he’s having a hard time grasping variables, maybe try explaining variables.

i did this now
var(–building-color1)
won’t work