curriculum/challenges/english/blocks/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
Now you need to link the styles.css file, so the styles will be applied again. Inside the head element, add a link element. Give it a rel attribute with the value of "stylesheet" and an href attribute with the value of "styles.css".
Note that the link element is a void element.
Your code should have a link element.
const link = document.querySelector('link');
assert.isNotNull(link);
The link element is a void element, it should not have an end tag </link>.
assert.notMatch(code, /<\/link>/i);
You should not change your existing head element. Make sure you did not delete the closing tag.
const headElementCount = document.querySelectorAll('head')?.length;
assert.strictEqual(headElementCount, 1);
You should have one link element.
const linkElementCount = document.querySelectorAll('link')?.length;
assert.strictEqual(linkElementCount, 1);
Your link element should be within your head element.
const link = document.querySelector('head > link');
assert.isNotNull(link);
Your link element should have a rel attribute with the value stylesheet.
const linkRelValue = document.querySelector('link')?.getAttribute('rel');
assert.strictEqual(linkRelValue, 'stylesheet');
Your link element should have an href attribute with the value styles.css.
const linkHrefValue = document.querySelector('link')?.dataset?.href;
assert.strictEqual(linkHrefValue, 'styles.css');
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="utf-8" />
<title>Cafe Menu</title>
</head>
--fcc-editable-region--
<body>
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
</section>
</main>
</body>
</html>
h1, h2, p {
text-align: center;
}