Why Isn't My CSS Working here?

Here’s my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="root"></div>

    <!-- Start of Markup Library -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.7/marked.min.js"
      integrity="sha512-a+W0h6Sho4fGYABZAQg6zdWP/qtyE+gzeVfNB/UApXRLuHKh7bT3TeA/LUOno+pcDjX0Vfzgtz6crFQC3YL9lA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.7/marked.js"
      integrity="sha512-a+W0h6Sho4fGYABZAQg6zdWP/qtyE+gzeVfNB/UApXRLuHKh7bT3TeA/LUOno+pcDjX0Vfzgtz6crFQC3YL9lA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- End of Markup Library -->
    <script src="index.js"></script>
  </body>
</html>

Here’s my CSS:

body {
  background-color: purple;
}

My JavaScript isn’t affecting anything in CSS, and when I inspect this link (https://9olw6.csb.app/) and look at the CSS, my body has no CSS. Why is this?

The styles.css and index.html files are not in the same folder.

You would usually use import for the CSS, so in App.js you would have import "./styles.css";

1 Like