---
id: 5d822fd413a79914d39e98d9
title: Paso 17
challengeType: 0
dashedName: step-17
---

# --description--

Cambie el valor de su variable de `#999` a `#aa80ff` y podrá ver cómo se aplica en todos los lugares donde usó la variable. Esta es la principal ventaja de usar variables, pudiendo cambiar rápidamente muchos valores en su hoja de estilo simplemente cambiando el valor de una variable.

# --hints--

Debe cambiar el valor de la variable de propiedad `--building-color1` de `#999` a `#aa80ff`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
```

# --seed--

## --seed-contents--

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

```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;
--fcc-editable-region--
  --building-color1: #999;
--fcc-editable-region--
}

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

```

