Learn CSS Variables by Building a City Skyline - Step 15

HTML-CSS
1

what’s the error in my code?

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

Your code so far

/* file: index.Ext.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.Ext.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(--building-color1) #999;
}
.bb1b {
  width: 80%;
  height: 10%;
}

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

.bb1d {
  width: 100%;
  height: 70%;
}

Your mobile information:

SM-S928B - Android 14 - Android SDK 34

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

Link to the challenge:

2

why are you giving two colors here?

3

Here’s how to use a CSS variable.

Define the variable:

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

Use the variable:

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

You can read more about this here:
https://www.w3schools.com/css/css3_variables.asp