freeCodeCamp/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-.../60a3e3396c7b40068ad6997a.md

75 lines
1.3 KiB
Markdown

---
id: 60a3e3396c7b40068ad6997a
title: Passo 17
challengeType: 0
dashedName: step-17
---
# --description--
Escreva uma nova regra que tenha como destino `.one` e defina sua `width` como 425 pixels.
# --hints--
Você deve ter um seletor `.one`.
```js
const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
assert(hasOne);
```
Você deve definir a propriedade `width` para `425px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
assert(hasWidth);
```
O elemento `.one` deve ter um valor de `width` de `425px`.
```js
const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
assert(oneWidth === '425px');
```
# --seed--
## --seed-contents--
```css
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
--fcc-editable-region--
--fcc-editable-region--
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko Painting</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one"></div>
</div>
</div>
</body>
</html>
```