0

Hi I'm new to using python with web programs and I'm trying to make a basic website that uses a CSS style sheet. I have three files: app.py, index.html, and style.css. They are all in the same directory. When I run app.py and go to localhost:8080, it displays "Hello World!", but it has not style from the style.css file and my terminal says "HTTP/1.1 GET /style.css" - 404 Not Found. When I just open my index.html file in chrome without using the app.py file, though, it does have the style formatting. Any help with this? Thanks in advance. My code is as follows:

app.py:

import web

urls = (
    '/', 'Index'
)

app = web.application(urls, globals())

web.config.debug = True

class Index(object):

    def __init__(self):
        self.render = web.template.render('.')

    def GET(self):
        return self.render.index()

if __name__ == '__main__':
    app.run()

index.html:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title>Basic Web Project</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

style.css:

p {
    color: green;
    font-size: 22px;
}
jkesh
  • 3
  • 2

3 Answers3

0

Have you tried to add style.css to urls, your application knows nothing about /style.css get request, probably that's why it returns 404.

deathangel908
  • 8,601
  • 8
  • 47
  • 81
0

When you specify <link type="text/css" rel="stylesheet" href="style.css" /> you say to your web browser the following thing : The style.css is on the same level as the index.html

Let me give you and example:

/app
   index.html
   style.css

if you open index.html from your browser you go to the following url

file://some/directory/app/index.html

)it is the same as file://some/directory/app/ because the browser will always search for the index when displaying a web page ) and when in this index.html the browser finds the <link> that specified by you it will search for that style.css under the following url : file://some/directory/app/style.css and of course that it will find that file.

Now the fun part.

When you open localhost:8080 it will display localhost:8080/index.html which works because your web app ( that python script that you run ) knows what to do when somebody goes to that url ( because you defined it in the urls variable and you created that class )

But when on this page the browser find the <link> tag he tries to go to localhost:8080/style.css which your web app dose not know how to handle because you did not specified it in your app .

Now the solution: You must define a url for /style.css and a class that will render that web page for you.

Matei
  • 1,783
  • 1
  • 14
  • 17
0

Use this code block as an insight:

import logging
from flask import Flask

app = Flask(__name__)

@app.route("/")
def index_page():
    return app.send_static_file("index.html")

@app.route("/css/styles.css")
def style_css():
    return app.send_static_file("css/styles.css")

This function ensures that Python can point it to the right file whenever your browser requests your web page's stylesheet.

You may give the functions any name of your choice. Here, my stylesheet is saved in a css/ folder located in a directory conventionally named static/ present in the same directory as my main.py file. You can choose to save your stylesheet directly in the static/ directory, and get rid of the /css at the @app.route function, and the css/ at the app.send_static_file parameter.

Also, ensure this matches correctly with the stylesheet link URL which you provided on your index.html page. You may also find this answer quite helpful.

Cloudlord
  • 11
  • 2