---
id: 617b65579ce424bf5f02ca73
title: Hatua ya 21
challengeType: 0
dashedName: step-21
---

# --description--

Kuna miundo miwili mikuu ya rangi: muundo wa <dfn>additive</dfn> RGB (red, green, blue) unaotumika katika vifaa vya kielektroniki, na <dfn>subtractive</dfn> CMYK (cyan, magenta, yellow, black) unaotumika katika magazeti.

Katika mradi huu, utafanya kazi na muundo wa RGB. Hii inamaanisha kuwa rangi huanza kuwa nyeusi, na hubadilika kadri viwango tofauti vya nyekundu, kijani kibichi na bluu vinapoongezwa. Njia rahisi ya kuona hii ni kwa kutumia kitendakazi cha CSS `rgb`.

Unda sheria mpya ya CSS inayolenga class ya `container` na uweke sifa ya `background-color` kuwa nyeusi na `rgb(0, 0, 0)`.

# --hints--

Unapaswa kutumia kichaguzi cha class kulenga class ya `container`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));
```

Sheria yako ya CSS ya `.container` inapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(0, 0, 0)`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker one">
      </div>
      <div class="marker two">
      </div>
      <div class="marker three">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

--fcc-editable-region--

--fcc-editable-region--

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.one {
  background-color: red;
}

.two {
  background-color: green;
}

.three {
  background-color: blue;
}

```
