Learn CSS Variables by Building a City Skyline - Step 15

To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name). Whatever value you gave the variable will be applied to whatever property you use it on.

Add the variable --building-color1 you created in the previous step as the value of the background-color property of the .bb1a class.

how to add this variable?

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;
}

/* User Editable Region */

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

/* User Editable Region */

.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/116.0.0.0 Safari/537.36 Edg/116.0.1938.81

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

Link to the challenge:

Hello!

It is only necessary to have the building color var which is correctly entered. Just remove the hex color.
When we use the variable colors, we no longer need to list the value of the color.

I hope this helps you! :slight_smile:

Happy coding! :slight_smile:

i did remove it, but still error

Could I please see your updated code? Sometimes it is outside the main area.

1 Like

It needs to be set as the background-color as should the previous one. . :slight_smile:

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

how can i add this variable?

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

its okay now thanks for your help :slight_smile:

1 Like