2021-10-14 23:33:13 +01:00
---
id: 60f0286404aefb0562a4fdf9
2021-10-21 10:07:52 -07:00
title: Step 4
2021-10-14 23:33:13 +01:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-4
2021-10-14 23:33:13 +01:00
---
# --description--
2022-03-14 15:54:43 +00:00
Add a `title` element to the `head` , and give your project a title of `Registration Form` . Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet` , a `type` attribute value of `text/css` , and an `href` attribute value of `styles.css` .
2021-10-14 23:33:13 +01:00
# --hints--
Your code should have a `title` element.
```js
const title = document.querySelector('title');
assert.exists(title);
```
The `title` element should be within the `head` element.
```js
2022-03-14 15:54:43 +00:00
assert.exists(document.querySelector('head > title'));
2021-10-14 23:33:13 +01:00
```
2022-03-14 15:54:43 +00:00
Your project should have a title of `Registration Form` .
2021-10-14 23:33:13 +01:00
```js
const title = document.querySelector('title');
2022-03-14 15:54:43 +00:00
assert.equal(title.text.toLowerCase(), 'registration form')
2021-10-14 23:33:13 +01:00
```
Remember, the casing and spelling matters for the title.
```js
const title = document.querySelector('title');
2022-03-14 15:54:43 +00:00
assert.equal(title.text, 'Registration Form');
2021-10-14 23:33:13 +01:00
```
Your code should have a `link` element.
```js
assert.match(code, /< link / )
```
You should not change your existing `head` tags. Make sure you did not delete the closing tag.
```js
const heads = document.querySelectorAll('head');
assert.equal(heads?.length, 1);
```
Your `link` element should be a self-closing element.
```js
assert(code.match(/< link [ \w\W\s]+ \/> /i));
```
Your `link` element should be within your `head` element.
```js
assert(code.match(/< head > [\w\W\s]*< link [ \w\W\s]* \/> [\w\W\s]*< \/head > /i))
```
Your `link` element should have a `rel` attribute with the value `stylesheet` .
```js
assert.match(code, /< link [ \s\S]*? rel = ('|"|`)stylesheet \1/)
```
Your `link` element should have a `type` attribute with the value `text/css` .
```js
assert.match(code, /< link [ \s\S]*? type = ('|"|`)text \/css \1/)
```
Your `link` element should have an `href` attribute with the value `styles.css` .
```js
assert.match(code, /< link [ \s\S]*? href = ('|"|`)( \.\/)?styles \.css \1/)
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
--fcc-editable-region--
< head >
< / head >
< body >
< / body >
--fcc-editable-region--
< / html >
```
