City Skyline Step 15&16

we are introduced to CSS variables ( --variable-name: value;)

we set the variable in the parent container then apply to each child individually. But the color doesn’t apply to the parent container, why not?

in Codepen i was playing with this, wanted to see if setting “.bb1, .bb1a, .bb1b, .bb1c, .bb1d background-color” universal would do the same thing which it did. was this just a lesson in using variables? as it seems setting it with one rule is more efficient?

<!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>

  • {
    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);
}
.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);
}

from codepen 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;

}

.bb1a {
width: 70%;
height: 10%;

}
.bb1b {
width: 80%;
height: 10%;

}

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

}

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

}
.bb1a, .bb1b, .bb1c, .bb1d {
background-color: #444
}

This is because the variable is defined in the parent container but not actually applied to anything.

1 Like

so i could define a variable anywhere, like under *, for instance?

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