Style.css not working

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.


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


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

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

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

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?

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.

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?

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.