HTML stylesheet fails to load on both Safari and Chrome-CodePudding

I am writing my 2nd website using Golang. My 1st one works perfectly but, using the same syntax and pathing, my 2nd one fails to load the stylesheet. The 2nd one is very simple, in fact I have started over twice with a new project trying to see what is wrong and eliminate any subtle issues.
In Chrome I get this error from the web inspector:

GT2:12 Refused to apply style from 'http://192.168.8.7/styleFolder/styleFile.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I have even tried replacing the stylesheet with the one from the working project, with the same result

In Safari, I get this one:

An error occurred trying to load the resource.

Here is the code for the HTML and the stylesheet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/styleFolder/styleFile.css">
    <title>Index File</title>
</head>
<body>
<h1>GT22</h1>
</body>
</html>

stylesheet:

.H1{
    background-color: yellow;
}

I have tried every type of pathing, relative and absolute but the stylesheet never gets loaded. Here is the simple file structure:

CodePudding user response：

You used an .H1 so in your way it has to be a class but it has to be h1 ! It is no class. If this is the only style you configured this is the reason

CodePudding user response：

Try to visit the link you provided and see if it loads the CSS file. If it returns an error response, then it means the server is not configured well, or you're just referring to a wrong CSS file path, thus, triggers the default error page which is actually text/html instead of text/css.

Please note:

text/html - not a valid stylesheet MIME type
text/css - a valid stylesheet MIME type

CodePudding user response：

Change the link to href="./styleFolder/styleFile.css" You need the . before the / to get out of the folder

Another problem i just noticed is that you need to set the color of the h1 and p NOT THE BACKGROUNDCOLOR !

So use h1{ color: yellow }

CodePudding user response：

OK, I figured it out. I had forgotten that, on the first project I had handled calls for images and templates with an init:

func init() {
    http.Handle("/images/", http.StripPrefix("/images/",
        http.FileServer(http.Dir("./images"))))
    http.Handle("/styles/", http.StripPrefix("/styles/",
        http.FileServer(http.Dir("./styles"))))
}

I don't know if the project is supposed to be responsible for these requests but this works. Thanks for your suggestions. There is so much to learn these days.