Why is my external CSS not working when linked with my html?-CodePudding

I have linked my external CSS to my html but when I run my html code in my browser, the rules that I specified in my CSS document are not being applied. Is there anything else that I can do to make my css code run?

I debugged the external css link in my html code and added a utf-8 charset attribute to my external css but still the rules that I specified in my external css were not being applied when I ran my html code. Below are my html and css codes:

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300;700&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
}

h1 {
  font-size: 150%;
}

h2 {
  font-size: 1.2em;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>My Trip Around the USA on a Segway</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="journal.css">
</head>

<body>
  <h1>Segway’n USA</h1>
  <p>Documenting my trip around the US on my very own Segway!</p>
  <h2>June 2, 2012</h2>
  <img src="images/segway1.jpg" />
  <p>My first day of the trip! I can’t believe I finally got everything packed and ready to go. Because I’m on a Segway, I wasn’t able to bring a whole lot with me:
    <ul>
      <li>cell phone</li>
      <li>iPod</li>
      <li>digital camera</li>
      <li>protein bar.</li>
    </ul>
    Just the essentials. As Lao Tzu would have said, <q>A journey of a thousand miles begins
with one step Segway.</q></p>
  <h2>July 14, 2012</h2>
  <p>I saw some Burma Shave style signs on the side of the road today:
  </p>
  <p>
    <blockquote>
      Passing cars,<br /> When you can’t see,<br /> May get you,<br /> A glimpse,<br /> Of eternity.<br />
    </blockquote>
  </p>
  <p>
    I definitely won’t be passing any cars.</p>
  <h2>August 20, 2012</h2>
  <img src="images/segway2.jpg" />
  <p>Well I made it 1200 miles already, and I passed through some interesting places on the way:S
  </p>
  <ol>
    <li>Walla Walla, WA</li>
    <li>Magic City, ID</li>
    <li>Bountiful, UT</li>
    <li>Last Chance, CO</li>
    <li>Truth or Consequences, NM</li>
    <li>Why, AZ</li>
  </ol>
</body>

</html>

CodePudding user response：

You have specified font family twice in the same line, i.e. font-family: font-family:

CodePudding user response：

How had been build your tree directory made? Maybe the problem is the path (src attribute in your html where you are adding the css file)

CodePudding user response：

I have just realized my problem based on the answers that have previously been provided. I was running my code through a local server (WAMP server), but when I ran the code without the server, it worked.