Step 51: Learn CSS Variables By Building A City Skyline

Hi, I’ve already completed and passed this step. However, I was still a bit confused and wanted to check with the forums.

The example states,

“Gradient transitions often gradually change from one color to another. You can make the change a solid line like this:”

linear-gradient(
  var(--first-color) 0%,
  var(--first-color) 40%,
  var(--second-color) 40%,
  var(--second-color) 80%
);

Our lesson states:

Add a linear-gradient to .bb2b that uses --building-color2 from 0% to 6% and --window-color2 from 6% to 9% .

In this case, why aren’t we using the percentages in the example, and where did 0% to 6% and 6% to 9% come from?

Thank you!

I’m not sure if I’m understanding your question correctly. The example is just an example, you don’t have to use those specific percentages in the example to create a gradient. I’m assuming the percentages they are asking you to use for the challenge fit in with what the ultimate plan is for this city skyline you are building.

So I guess the answer to your question would be “Because that’s what we need to do in order to make the skyline look the way want it to look.” But if I am not understanding you correctly then please clarify your question a bit.

That seems like a reasonable answer. I should’ve stated the question a bit differently. I realize that it was an example and different projects require different percentages, etc. I was just curious where the numbers came from, and how FCC determined that those numbers were the best selections to use.

it is a matter of taste. Just like asking someone why they picked this specific shade of gray for their wall. They picked it because they liked it.