--- id: 612e9d142affc44a453655db title: Step 16 challengeType: 0 dashedName: step-16 --- # --description-- Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`. # --hints-- You should have a `.key` selector. ```js assert(new __helpers.CSSHelp(document).getStyle('.key')); ``` Your `.key` selector should have a `background-color` property set to `#ffffff`. ```js assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)'); ``` Your `.key` selector should have the `position` property set to `relative`. ```js assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative'); ``` Your `.key` selector should have a `width` property set to `41px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px'); ``` Your `.key` selector should have a `height` property set to `175px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px'); ``` # --seed-- ## --seed-contents-- ```html Piano
``` ```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } #piano { background-color: #00471b; width: 992px; height: 290px; margin: 80px auto; padding: 90px 20px 0 20px; } .keys { background-color: #040404; width: 949px; height: 180px; padding-left: 2px; } --fcc-editable-region-- --fcc-editable-region-- ```