Learn CSS Variables by Building a City Skyline - Step 24

HTML-CSS
1

Please help I dont know why my code is not working. looks right to me.

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

/* User Editable Region */

.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, green);
}

.bb3 {
  width: 10%;
  height: 55%;
  --building-color3:#cc6699;
  background-color: var(--building-color3,pink);
}
.bb4{
  width: 10%;
  height: 55%;
}

/* User Editable Region */

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

Your browser information:

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

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

Link to the challenge:

2

I’m not sure why your code doesn’t pass as is, but if you put the variable declaration directly below the other two (i.e. within the .bb1 selector), you will pass.

3

First of all: CSS variables can have a global or local scope.

Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.

To create a variable with global scope, declare it inside the :root selector. The :root selector matches the document’s root element.

To create a variable with local scope, declare it inside the selector that is going to use it.

All of your colors are declared locally, which means in the .bb1 selector. Trying to use these colors as variables in other selectors will not work. That is why you gave the fallback value to colors of all other selectors. Actually, only fallback values (colors) work in this case. The requirement is that you declare a new color at the same place as others. Then, add the new color as a variable to the .bb3 selector: var(–building-color3, pink);

Put it simple, --building-color3:#cc6699; shouldn’t be found in the .bb3. Only background-color: var(--building-color3, pink);

Try to delete the fallback colors from all variables and you will get the empty buildings in the preview (without colors at all).

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.