Learn CSS Variables by Building a City Skyline - Step 40

“.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1);
background: linear-gradient(–building-color1,–window-color1);
}”
HINT: You should apply a background to .bb1a.
?? can someone check this out please

Look at the line above your own.
Do you see how you used the var function to reference the variable before?

This is still needed in the new line of code (any time you reference a variable you need to call var)

should the var be before linear-gradient or after ?
just asking because i have tried both

Sure, well what is var doing?

  var(—some-variable)

If you write var with the correct syntax, the browser will see it and will take this whole section and replace it automatically with the variable value.

So if the variable is a color red for eg, then it will process your css and put the word red instead of the words var(—some-variable). Knowing this then, where should var go?

You add var everytime you want to use the variable.

What is a variable?

A variable is used to hold data or values

You need to declare the variable first which you have done in :root.

How do I declare a variable?

For example if you want to decide that EVERYTIME i call --primary-color to be #333333 you can declare it like this:

:root{
  --primary-color: #333333
}

Now you have a variable that you can call anywhere else on the CSS code.

How do we call a variable?

For example you want to use it to change a font’s color. To call them you need to enclose the variable name with var( and ).
Example:

.something{
  color: var(--primary-color);
}

This way the value of the color property will replace var(--primary-color) with #333333

That is how variable works. Hope that helps. :grin:


Still Stuck?

If you are still stuck please provide us code of your latest attempt so that we can help you.

Your code should be enclosed in triple backticks like so:

```css

paste your code here

```

Cheers :+1:

var should be before
but now the struggle is between Var and linear-gradient
i have to input linear gradient somewhere around

Let me see what you have come up with so far. Remember linear gradient has nothing to do with var.

Var is a function for variable lookup.

Step 40

Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the background property and the syntax looks like this:

gradient-type(
  color1,
  color2
);

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 gradient of type linear-gradient to the background property with --building-color1 as the first color and --window-color1 as the second.

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

HINT: You should apply a background to .bb1a

But where is the update you made?

By the way, only copy the code next time (no need to give the instructions each time unless there is something new or disturbing happening)

Hi @Michaelnk

I see that you are trying to call a variable with -building-color1 and --window-color1.

However that is not the proper syntax to call a variable.

You call a variable by wrapping the variable with var( and ).

Like this

var(--variable-name)

You cannot call it without var( and ).

background: linear-gradient(–building-color1, --window-color1);
}
here it is

what do you mean bro
where is my linear-gradient going to be ?
and var

Hi you cannot call a variable as is. You need to wrap the variable using var( and ).

Your linear-gradient is already correct.

Please refer to our previous comment for the usage of var.

You can read more about the usage of variables here:

and

then why is my hint saying this

Hint

You should apply a background to .bb1a.

I mean, this looks the same as before?

Please add the var for each variable.

Then check your code and update me here.

my hint says this
" You should apply a background to .bb1a ."

this is what i have
.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1);
background-image: linear-gradient(–building-color1,–window-color1);
}

this isn’t talking about var , this is about gradient , any help on this .
am i supposed to create a selector for gradient #gradient

Yes that is true the hint is not helping.

But if you can just extend some trust my way…

Please add the var function to each of your variables.

Yes I can attest to that. Please trust her.

Don’t forget to use background instead of background-color.

1 Like

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