Unable to link css file with html project unless it's in a file called static

Question

I'm setting up website and I'm having some trouble using the html link tag while trying to hook up a css file. Basically whenever I put the files in a folder named "static" it has no problem finding the stylesheet but if I change nothing other than the name of the folder, I get a 404 on my css file. Just putting them in a folder called static and calling it a day would be nice but unfortunately, that file is uploaded once and I have to clear my browser history to see any changes I make in the file, which is very annoying.

I'm hosting using a python framework called Flask and everything is just on localhost right now so connectivity shouldn't be an issue. I've tried many different combinations of

"../testfolder/stylesheet.css"
"./testfolder/stylesheet.css" 
"/testfolder/stylesheet.css" 
"testfolder/stylesheet.css"

and none of them have worked. Yet when I do use "static" instead of "testfolder," everything works just find.

I've checked many other questions on StackOverflow and other sites and I have yet to find an answer to this specific problem. Thanks in advance for your help.

My file structure looks like this

>app
  app.py
  >templates
    index.html
  >testfolder
    stylesheet.css

The html tag looks like this

<!DOCTYPE html>
<html>
  <head>
    <script src="stati/functions.js"></script>
    <link href="stati/stylesheet.css" rel="stylesheet">
  </head>

and the .css file looks like this

.sidenav {
  right: 0;
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Page content */
.main {
  margin-left: 200px
}

etc you get the idea

This is the error message I get when I try anything but the static folder

 127.0.0.1 - - [18/Jul/2019 18:01:34] "GET /stati/stylesheet.css HTTP/1.1" 404 -

and this is the message I get when I use static

127.0.0.1 - - [18/Jul/2019 18:01:03] "GET /static/stylesheet.css HTTP/1.1" 200 -

score 0 · Answer 1 · answered Jul 18 '19 at 22:32

You can only load a file from a webserver if it has a URL.

Flask uses routes to determine what to send to the web browser for any given file.

If you want it to read a file from disk and serve it up, then you need to create a route for it. Typically you do this using the special static endpoint (which is built-in).

If you don't want to use that, then you'll need to write something custom. to give it a URL.

Unable to link css file with html project unless it's in a file called static

1 Answers1