I am trying to create a website using Flask, but while my HTML file is working, my CSS file is not working. I have tried refreshing my cache and using different lines of code others have posted on similar questions, but nothing has worked for me.
This is my current project hierarchy:
I have the following line of code in my HTML file's head.
<link rel="stylesheet" href="{{ url_for('static', filename='css/mainpage.css') }}">
I got this code from a different stack overflow question too, so I am quite confused on what I am doing wrong too.
Application not picking up .css file (flask/python)
Thanks in advance!
I could not duplicate your problem with the following toy example:
#!venv/bin/python
from flask import Flask
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True)
My directory layout is
├── app.py
├── static
│ └── css
│ └── mainpage.css
├── templates
│ └── index.html
└── venv
The contents of index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/mainpage.css') }}">
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
<p>A paragraph.</p>
</body>
</html>
The contents of mainpage.css:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Try adding the following piece of code in the head section
<link rel="stylesheet" type="text/css" href="/static/css/mainpage.css">
Related
Hi i am trying to host a server my raspberry pi with flask but css does not work. It shows plain html. when i try the same thing with same file names, location and same code it works but from my raspberry pi it does not work?
To Fix I Tried (so don't bother saying):
Tried using static or normal way
Tried doing cmd+shift+R
Tried changing file names
HTML:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<html>
FLASK:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('learn.html')
TREE VIEW:
Thank You So Much If You Can Fix It.
turns out i have made a typo i didnt notice it for hours my looked like this
<link rel="stylesheet" href=""{{ url_for('static', filename='styles.css') }}>
This is how it works:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel= "stylesheet" type= "text/css" href= "static/styles.css">
</head>
<html>
You have to call the relative path to the css file
Do this:
<link rel="stylesheet" href="../static/styles.css/">
You need to get out to templates folder with .. and then put path to styles.css
Hope this helps!
I am a beginner at web development. I am using Python and Django on a Mac. When I want to link CSS to HTML, this shows in the command line and on the web page is still only text from the html file.
Command line:
Not Found: /style.css
[29/May/2021 17:37:12] "GET /style.css HTTP/1.1" 404 2095
This is my HTML file:
<html>
<head>
<title>Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Webpage</p>
</body>
</html>
and this is my CSS file:
body {
background-color: royalblue;
}
Your static file is not matching any URL pattern rule. Configure static files from here, and also configure urls.py from here for development
This may be because you do not have your CSS file in the same relative directory as the file you're working on.
If you have the CSS file in the root of your server directory, you may need to add / to the beginning of your path.
An example is if your directory structure looks like this
.
├── homepage.html
├── index.html
├── other
│ └── test.html <-- The page you are accessing
└── style.css
If in this page, you had <link rel="stylesheet" href="style.css">, it would not work, since style.css is not in the other/ directory.
That is because, unless you specify, all the paths are relative.
You can specify that you do not want relative paths by adding / to the beginning of your path followed by the directory that style.css is located in.
<link rel="stylesheet" href="/styles/style.css">
The / ensures that this will work in any file in the HTML directory
I am trying to create a web app using flask. My style.css file is working correctly some of the time so I know that they are linking correctly but certain parts seem to not be finding the appropriate classes in my HTML templates.
specifically :
.error {
width: 100%;
text-align: center;
font-size: 18px;
color: red;
}
should match with
<div class = "error">
{{error}}
</div>
when I display the HTML in a browser this works correctly, but when I run my flask application the styling is not applied.
what am I missing?
You are most likely not importing the css file correctly.
Let's suppose that your project is structured as follows:
├── project/
│ ├── __init__.py
| ├── main.py
│ ├── templates/
│ │ ├── base.html
│ └── static/
│ └── style.css
In order to correctly import the css file with flask, you need to do (base.html):
<!DOCTYPE html>
<html>
<head>
<title>Error page</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="error">
{{error}}
</div>
</body>
</html>
In your main app, you also need to correctly render the template (main.py):
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/error/<error>')
def error(error):
return render_template('base.html', error=error)
if __name__ == "__main__":
app.run(debug=True)
I have a server in Flask and I try created PWA with React. I am totally new in web development.
I created a Flask server, REST api too and something like a react projects but when I tried create something for front-end its not working. In my opinion file index.html have not included React.
This is my server.py:
api = Api(app)
#app.route('/')
def index():
return render_template("roos/public/index.html")
if __name__ == '__main__':
app.run(port='8080')
I run server with command: python server.py
And it's works - when I use webbrowser -> 127.0.0.0:8080 I have a white page
This is works.
In roos I have this directories, with files:
-ROOS
|-node_modules
|-(many hundred directory)
|-public
|- favicon.ico
|- index.html
|-manifest.json
|-src
|-App.css
|-App.js
|-App.test.js
|-index.css
|-index.js
|-logo.svg
|-serviceWorker.js
-package.json
-package-lock.json
My file, index.html look like:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>ROOS</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
And file index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();
And this not working - I can't run any scripts which I created in this file. In my opinion index.js is not call when I run the server. I don't have idea how I can start this .js scripts
Sorry for asking such a basic question, but I'm stuck and can't figure out what I am doing wrong. I am developing a small website using Flask, teaching myself web coding along the way.
I have the following file structure:
mathsoc
mathsoc.py
mathsoc/templates
mathsoc.css
mathsoc_main.html
My mathsoc.py looks like this:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('mathsoc_main.html')
if __name__ == "__main__":
app.run(debug=True)
Then mathsoc_main.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mathsoc.css"/>
<title>Some Title</title>
</head>
<body>
<div id="content">
Hello World!
</div>
</body>
</html>
And mathsoc.css looks like this:
#content {
width:46em;
background-color: yellow;
}
But mathsoc_main.html cannot find the stylesheet, it appears: it does not apply either of the defined properties to the content. I'm guessing that I'm doing something wrong with <link rel="stylesheet" type="text/css" href="mathsoc.css"/>, but I don't know what. It seems so blindingly obvious, yet no style is loaded!
Change your folder structure to include a static folder.
mathsoc
mathsoc.py
templates
mathsoc_main.html
static
mathsoc.css
See http://flask.pocoo.org/docs/0.10/tutorial/folders/