1

I'm having some trouble connecting my CSS file to my HTML file. This is my code for the HTML file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=“styles.css">

    <title> BLAH BLAH | Portfolio </title>
</head>

<body>
    <div class =“links”>
    <ul>
        <li><a href=“#”>ABOUT</a></li>
        <li><a href=“#”>PROJECTS</a></li>
        <li><a href=“#”>CONTACT</a></li>
    </ul>
    </div>

<h2> BLAH BLAH </h2>

</body>
</html>

and this is my CSS file so far: 

.links li{
display:inline;
}

I'm just trying to get the lists (about, projects, contact) to be presented in a straight line on the top of my page. However, even after applying the css code, the format doesn't change on my webpage and is instead presented on three separate lines. I was wondering if someone could help me figure out what I'm doing wrong?

BTW my CSS file is called styles.css

Improve this question
2
  • 1
    Looks like you have some typos, note “styles.css"> that the quote needs to be " and not “. So change all the quotes in your file to the proper ones. Note this happens throughout the file. Commented Sep 10, 2015 at 3:51
  • @asdfgh I would recommend something like Notepad++ on Windows, or Text Wrangler on Mac OS (others will probably jump in here with their favorite editors, but the idea is use any editor that was built with programming in mind). That way you don't get this quotation mark autocorrect screwiness. Commented Sep 10, 2015 at 4:06

3 Answers 3

Reset to default
3

You're not using the quotes for the href.

<link rel="stylesheet" href=“styles.css">
<!--                        ^         -->

This is the reason the CSS file is not loaded. Use normal double quote.

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

The same thing is done in complete code. Change this in all the occurrences.

.links li {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
  <!-- <link rel="stylesheet" href="styles.css"> -->

  <title>BLAH BLAH | Portfolio</title>
</head>

<body>
  <div class="links">
    <ul>
      <li><a href="#">ABOUT</a>
      </li>
      <li><a href="#">PROJECTS</a>
      </li>
      <li><a href="#">CONTACT</a>
      </li>
    </ul>
  </div>

  <h2> BLAH BLAH </h2>

</body>

</html>

I'd recommend you to validate your HTML from W3

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I see this all the time when code is shared over skype, or other terrible programs.
1

<link rel="stylesheet" href=“styles.css"> assuming that the file name of your stylesheet is styles.css AND that file is located in the same file as your HTML page you are referencing this correctly. Additionally you can try adding the type to your link tag (example below)

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Improve this answer

Comments

0

just change the “ with "

because of this syntax error: browser generates the following error:

GET file:///C:/Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net::ERR_FILE_NOT_FOUND

the following snippet will work fine

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">

    <title> BLAH BLAH | Portfolio </title>
</head>

<body>
    <div class ="links">
    <ul>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PROJECTS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    </div>

<h2> BLAH BLAH </h2>

</body>
</html>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.