CSS Not Working

Code Help HTML/CSS/JS
1

Question:
My CSS code isn’t working with my HTML and Flask code

Repl link:
https://replit.com/@JohnnySuriano/johnnycom#style.css

HTML Code

<html>
  <head>
    <title>Johnny.Com</title>
    <script src="https://replit.com/public/js/repl-auth-v2.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <h2 class="title">Welcome to Johnny.Com</h2>
    <form method="post" action="/login">
      <button type="submit" class="button1">Login in with Account</button>
    </form>
    <form>
      <button class="button1" onclick="LoginWithReplit()"> Login with Replit</button>
    </form>
  </body>
</html>

CSS Code

html, body{
  width: 100%;
  height: 100%;
  background-color: red;
}

h1{
  color: blue;
}

Flask Code

from flask import Flask, redirect, request

app = Flask(__name__, static_url_path="/static")

@app.route("/")
def home():
  page = ""
  f = open("home.html", "r")
  page = f.read()
  f.close()
  return page

app.run(host='0.0.0.0', port=81)

Files
Screenshot 2023-06-01 09.25.34

2

In your flask:
app = Flask(__name__, static_url_path="/static")
You are using static, and by default, he uses static directory by default. So, if your CSS is not inside a folder called “static” he’s not gonna find the file.

Also, it’s better if you use Flask’s built-in render_template function to render your HTML.
Create a folder called “templates” and put your home.html inside that folder.

Than, your main.py would be something like this:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
  return render_template('home.html')

if __name__ == "__main__":
  app.run(host='0.0.0.0', port=81)

And the files in your project would be something like:

main.py
static (folder)
----styles.css
templates (folder)
----home.html

3 Likes
3

After trying this I put my Flask Code as this:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
  return render_template('home.html')

if __name__ == "__main__":
  app.run(host='0.0.0.0', port=81)

Like you suggested, and my files look like this:
Screenshot 2023-06-01 12.46.16

But I still get this when I load the page:
Screenshot 2023-06-01 12.46.56

Might be a problem with my HTML (same as above)

4

Keep the file structure as @WindLother suggested, then change a html line from;
<link href="style.css" rel="stylesheet" type="text/css"/>
To
<link href="/static/style.css" rel="stylesheet" type="text/css"/>

You had to provide the actual path of the file. Not just the file name

2 Likes
5

Sorry, completely forgot about the HTML part.

Do as @QuantumCodes code says to reference that the style.css is inside the static folder.

<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">

Also I just noticed that you’re styling h1 , but in your HTML you are using h2 with class title . Update your CSS to target h2

3 Likes
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.