I am having some problems with my css and html file

Question

This is my html code:

<html>
<head>

<style rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"></style>

</head>



<body>

   <h2 align="centre">Hello!</h2>
   <h1>Hello Again!</h1>

   <p>this is a paragraph!</p>
</body>
</html>

this is css code:


body {
    background: #fafafa;
    color: red;
}
header {
    color: blue
}

this is python code:


from flask import Flask
from flask import render_template
from flask import request


app = Flask(__name__)


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

if __name__ == "__main__":
    app.run(debug=True)

just one url but its still not working i am not a html or css "expert" so i need some help, and i dont have any friends so stackoverflow was the only option

i also saw many people use <link> tag instead of <style> idk the difference and google is showing something else, any help would be appriciated!

Maybe problem is in file structures. [Look this answe](https://stackoverflow.com/a/22260791/4025741) — scalloty, Apr 01 '21 at 08:55

score 2 · Answer 1 · edited Apr 02 '21 at 12:21

Here, I Sorted The Linkings Between Files...

This Is The Required Folder Structure

Here Is The main.css,

body {
  background: #fafafa;
  color: red;
}

header {
  color: blue;
}

Here Is The base.html,

<html>
<head>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"></link>
</head>

<body>
  <h2 style="text-align: center;">Hello!</h2>
  <h1>Hello Again!</h1>
  <p>this is a paragraph!</p>
</body>

</html>

Here is app.py,

from flask import Flask
from flask import render_template
# from flask import request


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


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


if __name__ == "__main__":
    app.run(debug=True)

And The Result of the program

You Have Not Used Any header tag in HTML That's Why No Blue Color Is Shown!! — Mohzaib Ali, Apr 01 '21 at 09:14

score 1 · Answer 2 · answered Apr 01 '21 at 08:55

To include an external stylesheet, you can use <link rel="stylesheet" href="styles.css"> where styles.css is the name of the stylesheet. This should appear within the <head> tags. The <style> tag can be used for internal styles such as:

<style>
    body {
        background: #fafafa;
        color: red;
    }
    header {
        color: blue
    }
</style>

in your HTML. w3schools has a page explaining the different ways to include CSS.

score 0 · Answer 3 · answered Apr 01 '21 at 08:50

0

I don't know python, but why are you trying to get your css file using 'href' tag when you can use 'src' like this

<head>
    <style rel="stylesheet" type="text/css" src="yourfile.css"></style>
</head>

where src can be absolute path to your file ('c:/yourproject/yourfile.css') or, better, relative path so if you have html and css in the same path you can simply use your css file name?

answered Apr 01 '21 at 08:50

Pier Paolo

1

the way `flask` is different with normal `html` and `css` , in this case , `flask` is the server which will manage `html` and other file..so it is needed to use `href` by a `` – Amirul Akmal Apr 01 '21 at 10:03

I am having some problems with my css and html file

3 Answers3