Style.css not working

1

I need help. The style.css doesn’t apply to the html page it is intended. Fyi, both files are in the same directory. I also tried clearing the browsing data(cache) but it doesn’t solve the problem.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Table of Contents</title>
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body >
  <h1>Introduction</h1>
  <h2>Whom this book is for?</h2>
  <h2>Errata</h2>
  <h1>Chapter 1</h1>
  <h2>What you will learn in this chapter</h2>
  <h2>Summary</h2>
  <h1>Chapter 2</h1>
  <h2>Recap</h2>
  <h2>Conclusion</h2>
</body>
</html>

#style.css

body {
    font-family: Verdana, Arial, sans-serif;
}
h1 {
    color: white; background-color: navy;
}
h2 {
    color: green; margin-left: 40px; border-bottom: 4px dotted black;
}
2

I just created those 2 files and see no problem. Any reason why you specify media=screen?

ScreenshotTestCode
ScreenshotTestCode1054×569 23.8 KB

3

@JohnnyBizzel as he say, its working fine in my browser too.

4

Untitled1
Untitled11920×1080 219 KB

I think is the root problem. I found it at the my google chrome Developer Tools > Console… Does anyone know a solution to allow loading local resource?

5

I agree, the code is technically correct. There are no errors in my command prompt/terminal. The local server is able to be launched in a browser and the html template is able to be displayed. The only problem is the styles are not applied on the page.

6

I just tried including media screen, as someone suggested it to me as a potential solution. Apparently, it does nothing of significance. The problem I think is the restriction to load the local resource (as shown in the image below). Any ideas on how to go about it?

7

Try using a different browser or something like a cloud editing platform like codepen.
In the real world, files are not served locally so this is just for testing before you deploy a website to a web server.
PS. I use Chromium on Linux and can open local files no problem.