freeCodeCamp/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building.../5f3477cb2e27333b1ab2b955.md

1.6 KiB

id title challengeType dashedName
5f3477cb2e27333b1ab2b955 Step 16 0 step-16

--description--

Now you need to link the styles.css file so the styles will be applied again. Nest a self-closing link element in the head element. Give it a rel attribute value stylesheet and an href attribute value of styles.css.

--hints--

Your code should have a link element.

const link = document.querySelector('link');
assert(link);

You should not change your existing head element. Make sure you did not delete the closing tag.

assert($('head').length === 1);

You should have one self-closing link element.

const link = document.querySelectorAll('link');
assert(link.length === 1);

Your link element should be within your head element.

const link = document.querySelector('head > link');
assert(link);

Your link element should have a rel attribute with the value stylesheet.

const link = document.querySelector('link')
const rel = link.getAttribute('rel')
assert(rel == `stylesheet`)

Your link element should have an href attribute with the value styles.css.

const link = document.querySelector('link')
assert(link.dataset.href == 'styles.css')

--seed--

--seed-contents--

<!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;
}