Learn CSS Variables by Building a City Skyline - Step 15

Tell us what’s happening:
Describe your issue in detail here
i have done everything nothing is working

  **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 {--building-color1:#999;
width: 70%;
height: 10%;
}
.bb1b {
width: 80%;
height: 10%;
}

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

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

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

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

Link to the challenge:

Look closely at the instructions again:

“To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name).”

You would replace --variable-name with the actual name of your custom variable. Also, you are using that variable for the background-color property, so you need to use the correct format to set that property, just like you did with the width and height property.

Finally, #999 shouldn’t be in your solution. The instructions were just explaining that that is the value of your custom variable.

still dont understand

Could you be more specific about what you don’t understand?

where the var is supposed to be i have tried everything

Example:

.build {
background-color: var(--myColor8);
}
2 Likes
mod edit: solution redacted
1 Like

I am stuck on this one too i dont understand what we are doing?i have googled an d w3 school as well i am lost

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

we can help you but please click the “ask for help” button to open a new topic for yourself which will include a link to the step, your code and an area for you to type your questions.

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.