Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

HTML file not linking to CSS file – Artificial Intelligence

The html file is not linking to the css file. Both the files are placed side by side in the same directory. It used to work fine before but suddenly it doesn’t work. I have tried everything that was mentioned in the answers to similar questions here in StackOverflow but still doesn’t work.

Html code: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Four card feature section</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
  <div class="container">
    <div class="part1">
      <p>Reliable, efficient delivery</p>
      <h2>Powered by Technology</h2>
      <p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
    </div>
    <div class="part2">
    <div class="supervisor">
      <h3>Supervisor</h3>
      <p>Monitors activity to identify project roadblock.</p>
    </div>
    <div class="wrapper">
    <div class="teambuilder">
      <h3>Team Builder</h3>
      <p>Scans our talent network to create the optimal team for your project.</p>
    </div>
    <div class="karma">
      <h3>Karma</h3>
      <p>Regularly evaluates our talent to ensure quality.</p>
    </div>
    </div>
    <div class="calculator">
      <h3>Calculator</h3>
      <p> Uses data from past projects to provide better delivery estimates.</p>
    </div>

  </div>
  </div>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Your Name Here</a>.
    </p>
  </footer>
</body>
</html>

Css code: 

body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   background-color: hsl(0, 0%, 98%);
   text-rendering: optimizeLegibility;
}

.container {
   width: 60%;
   height: 60%;
}

For the folder structure please refer to this
https://github.com/swethalakshmi22/four-card-feature-section

Tags:

2

Answers


  1. 0
    1. After checking your code-snippet , it seems that either css style.css is not on the same location where your html file is. Please check that.
    2. Can you please check the right on the folder (IIS_USER) must have permission on this to read the style.css ?
    Login or Signup to reply.
  2. 0

    The code you have uploaded on Github it has href=”/style.css” please write

    here your code in the question is fine. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Four card feature section</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
  <div class="container">
    <div class="part1">
      <p>Reliable, efficient delivery</p>
      <h2>Powered by Technology</h2>
      <p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
    </div>
    <div class="part2">
    <div class="supervisor">
      <h3>Supervisor</h3>
      <p>Monitors activity to identify project roadblock.</p>
    </div>
    <div class="wrapper">
    <div class="teambuilder">
      <h3>Team Builder</h3>
      <p>Scans our talent network to create the optimal team for your project.</p>
    </div>
    <div class="karma">
      <h3>Karma</h3>
      <p>Regularly evaluates our talent to ensure quality.</p>
    </div>
    </div>
    <div class="calculator">
      <h3>Calculator</h3>
      <p> Uses data from past projects to provide better delivery estimates.</p>
    </div>

  </div>
  </div>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Your Name Here</a>.
    </p>
  </footer>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search