Self Closing <Link> Elements

HTML-CSS
1

Hello,

I am new to coding and have been having trouble with several projects because of the self closing element. In step 17 of “Learn Basic CSS by Building a Cafe Menu,” step 7 of “Learn CSS Colors by Building a Set of Colored Markers, 98% Completed,” step 4 of “Learn HTML Forms by Building a Registration Form,” and most recently step 4 of “Learn Typography by Building a Nutrition Label,” I am tasked with creating a self-closing element with rel=“stylesheet” and href=“./styles.css”.

The problem is that in all of these exercises, regardless of what kind of code I put in, the system refuses to accept it as correct. In each of these cases I have tried several different solutions including adding a closing tag within the element, omitting the ./ and using href=“styles.css”, and rearranging the attribute and element order. Furthermore, when I skip a step and copy the code that appears as the default for the exercise, the system still does not accept the code, leading me to believe something is wrong with the website.

So far this has not been a significant problem because I can skip steps, but I am worried that it will resurface in a certification project. Is there anything I can do in the meantime, or somewhere else I can report this bug?

2

Please give us a specific example. Give us a link to the step and also paste your HTML in here so we can see what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

3

Example from “Learn basic CSS by building a cafe menu”, step 17: " 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."

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet"/>
</head>
<body>
  <header>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
  </header>
  <main>
    <section>
      <h2>Coffee</h2>
    </section>
  </main>
</body>
</html>

/* file: styles.css */
h1, h2, p {
text-align: center;
}

Example from step 7 of “Learn CSS Colors by Building a Set of Colored Markers.” Step 7, " In this project you’ll work with an external CSS file to style the page. We’ve already created a styles.css file for you. But before you can use it, you’ll need to link it to the page.

Nest a link element within the head. Give it a rel attribute set to stylesheet and an href attribute set to styles.css."

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>CSS Color Markers</h1>
</body>
</html>

/* file: styles.css */

Neither case is acceptable for submission

4

I just tested both of your examples with the HTML you posted for them and they both passed for me. They both did used to have a bug in them that required a forward slash at the end of the <link> tag, but that has been fixed. I wonder if your are somehow still using the older version with the bug? Try adding a forward slash to the end of those <link> tags so the end with /> and see if they work.

5

I have tried submitting both with and without /> and it doesnt work, but it’s good to know it’s not just broken altogether. Is there any way to check which version I am using?

6

What browser/version and OS are you using? If you are not using a recent version then you might want to upgrade. If you are, then you might want to try a different browser. I’m just guessing here as your HTML is correct and should pass both of these steps.

7

I’m using Brave but without having updated it recently, and running the code in Chrome worked! I guess it’s something to do with my browser, so I’ll update it and try it again. Thanks for your help!

8

For what it’s worth, just tested in the most recent version of Brave and they passed for me there. I wouldn’t think that using an older version would stop these tests from working since the HTML being used is very basic. But the tests themselves could be using some feature that older browsers don’t support.

Glad you got this figured out.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.