0

I'm trying to create a simple flask app, and I'm new to HTML and CSS. I can't seem to link my CSS file to my HTML file and have it load successfully on my webpage. I've looked at other threads to no avail, and most of the comments centre around file structure, which seems fine to me, so I have no idea what the issue is. Both my html file and CSS file are in the same directory, and in my HTML file I have 

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" href="./styles.css">

    </head>
    <body>
        <h1>Welcome</h1>
    </body>
</html>>

My CSS file is indeed called styles.css and just contains 

h1 {
    color: blue;
    text-align:center
}

I've tried about a dozen other combinations for href and none seem to work.

Here is a screenshot of my file structure from Github

The two HTML and CSS files are in the "templates" directory.

No matter how I change the file structure, I get the error: 

GET http://127.0.0.1:5000/styles.css net::ERR_ABORTED 404 (NOT FOUND)

when I inspect the page http://127.0.0.1:5000/

Not sure if I'm making some really trivial error, but any help at all would be greatly appreciated.

Thanks

jayveesea
  • 2,886
  • 13
  • 25
tkon
  • 17
  • 4

1 Answers1

0

In case both of files are in the same directory, you cannot locate CSS-file as you did ./styles.css. Try this one:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" href="styles.css">

    </head>
    <body>
        <h1>Welcome</h1>
    </body>
</html>
worker
  • 83
  • 6
  • Thanks for the response, that's what I had initially but it still doesn't work unfortunately – tkon May 27 '20 at 18:53