Design a Business Card <link> Element Not Recognized in HTML File

HTML-CSS
1

Problem Description

I am working on a business card project and linking an external CSS file (styles.css) using the <link> element inside the <head> section. However, I am getting the following error:

:cross_mark: “Your link element should have an href attribute with the value styles.css.”

Here is my <link> element in index.html:

<link rel="stylesheet" href="styles.css">

Despite having the correct href value, the error still persists.

My Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Business Card</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="business-card">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="a flower for profile">
        <p class="full-name">Your Name</p>
        <p class="designation">Software Developer</p>
        <p class="company">@freecodecamp</p>
        <hr>
        <p>Email: your-email@example.com</p>
        <p>Phone: (123) 456-7890</p>
        <a href="http://example.com/">Portfolio</a><hr>
        <div class="social-media">
        <h2>Connect with me</h2>
        <span><a href="www.twitter.com">Twitter</a></span>
        <span><a href="www.linkedln.com">LinkedIn</a></span>
        <span><a href="www.github.com">GitHub</a></span>
        </div>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: rosybrown;
}

p {
    margin: 5px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.business-card {
    width: 300px;
    padding: 20px;
    margin-top: 100px;
    background-color: rgb(252, 241, 245);
    text-align: center;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
}

Troubleshooting Steps Taken

  1. Checked for Typos in href Value:
    • The href value is exactly “styles.css”, matching the CSS file name.
  2. Cleared Browser Cache & Hard Refreshed:
  • Pressed Cmd + Shift + R (Mac) to reload without cache.

Question for the Forum:

  • Why is the <link> element not recognizing styles.css even though the href value is correct?
  • Are there hidden issues that might be causing this?
  • Could this be an issue with the validation system detecting the <link> incorrectly?

Any guidance or debugging suggestions would be appreciated! :rocket:

2

Hi and welcome to the community!
Your code passes for me. Try resetting the lesson and add your code again.
Good luck!

3

what is the link to the project?

4

I think it’s the business card project:

5

thank you

when asking for help it is important to link to the project to provide more contenxt

6

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.