Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Anyone to help? I want to get past this issue and I think I did it right. It is the gradient syntax that requires me to input after the background-color which is something I did
Your code so far

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background: linear-gradient( --building-color1, --window-color1);
}

Your browser information:

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

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

Link to the challenge:

2

You need to include the var keyword when using variables.

3

That does not apply here not working. Erroe message persists

4

In the example, color1 is solid at the top, color2 is solid at the bottom, and in between it transitions evenly from one to the next. In .bb1a , add a background property below the background-color property. Set it as a gradient of type linear-gradient that uses --building-color1 as the first color and --window-color1 as the second.

5

For it to work you need to enclose your variables in a var
So that you have,var(--name-value)
Each of the variable should be in it’s own brackets.

6 
.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background: linear-gradient (var(--building-color1), (var(--window-color1);
}

Code still not working

7

Your second variable has an opening bracket at the start. You shouldn’t have that.

8

I’m confused now. I removed the brackedt, it is error

I have 3 variables there. One from background-color and two from background liner gradient

9

Their is bracket before the word var you should only remove that.

10 
.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background: linear-gradient var(--building-color1), var(--window-color1);
}

Removed. Error persists

gradient style given is

gradient-type(
  color1,
  color2
);

there’s only opening and closing bracket

11

Now what you need is to enclose your variables (both) in brackets since the linear gradient is a function.

background: linear-gradient( var(--value-name), var(--value-name) );
2 Likes
12

It’s helpful to think of parentheses and brackets as always coming in pairs.

The linear-gradient property needs a pair of parentheses.

Within that, each variable you use also needs to have a pair of parentheses around the variable name (after the var keyword).

This is an important principle which will serve you well, especially when you get into JavaScript and other languages where a misplaced bracket could cause you no end of headaches!

1 Like
13

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