--- id: 5d822fd413a79914d39e98d6 title: Step 14 challengeType: 0 dashedName: step-14 --- # --description-- Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`. # --hints-- You should create a new variable named `--building-color1`. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); ``` You should define the `--building-color1` variable within `.bb1`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); ``` You should give `--building-color1` a value of `#999`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); ``` # --seed-- ## --seed-contents-- ```html City Skyline
``` ```css * { border: 1px solid black; box-sizing: border-box; } body { height: 100vh; margin: 0; overflow: hidden; } .background-buildings { width: 100%; height: 100%; } --fcc-editable-region-- .bb1 { width: 10%; height: 70%; display: flex; flex-direction: column; align-items: center; } --fcc-editable-region-- .bb1a { width: 70%; height: 10%; } .bb1b { width: 80%; height: 10%; } .bb1c { width: 90%; height: 10%; } .bb1d { width: 100%; height: 70%; } ```