---
id: 5d822fd413a79914d39e98d9
title: Hatua ya 17
challengeType: 0
dashedName: step-17
---

# --description--

Badilisha thamani ya kihifadhi chako kutoka `#999` hadi `#aa80ff` na unaweza kuona jinsi kinavyotumika kila mahali ulipotumia kihifadhi. Hii ndio faida kuu ya kutumia vihifadhi, kuwa na uwezo wa kubadilisha haraka thamani nyingi kwenye laha yako ya mitindo kwa kubadilisha tu thamani ya kihifadhi.

# --hints--

Unapaswa kubadilisha thamani ya sifa yha `--building-color1` kutoka `#999` hadi `#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);
}

```

