2019-11-04 21:01:05 -06:00
---
id: 5d822fd413a79914d39e98cd
2021-10-21 10:07:52 -07:00
title: Step 5
2019-11-04 21:01:05 -06:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-5
2019-11-04 21:01:05 -06:00
---
2020-11-27 19:02:05 +01:00
# --description--
2019-11-04 21:01:05 -06:00
2021-07-16 04:46:40 +01:00
In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black` . This is a trick I like to use to help visualize where elements are and their size. You will remove this later.
2019-11-04 21:01:05 -06:00
2020-11-27 19:02:05 +01:00
# --hints--
2019-11-04 21:01:05 -06:00
2021-07-16 04:46:40 +01:00
You should use the `*` selector.
2019-11-04 21:01:05 -06:00
2020-11-27 19:02:05 +01:00
```js
2021-07-16 04:46:40 +01:00
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
You should use the `border` property to style all the elements.
```js
assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
```
All elements should have a `1px solid black` border.
```js
const astStyles = new __helpers.CSSHelp(document).getStyle('*');
assert.equal(astStyles?.border, '1px solid black');
2019-11-04 21:01:05 -06:00
```
2020-11-27 19:02:05 +01:00
# --seed--
2019-11-04 21:01:05 -06:00
2020-11-27 19:02:05 +01:00
## --seed-contents--
2019-11-04 21:01:05 -06:00
```html
<!DOCTYPE html>
< html >
< head >
2022-03-14 15:54:43 +00:00
< title > City Skyline< / title >
2021-07-16 04:46:40 +01:00
< link href = "styles.css" rel = "stylesheet" type = "text/css" / >
2019-11-04 21:01:05 -06:00
< / head >
< body >
< / body >
< / html >
```
2021-07-16 04:46:40 +01:00
```css
--fcc-editable-region--
2019-11-04 21:01:05 -06:00
2021-07-16 04:46:40 +01:00
--fcc-editable-region--
2019-11-04 21:01:05 -06:00
```
