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
Related
I have the next problem:
Im ceating a basic django webpage using HTML and CSS. The issue is that when I try to make the href from the HTML file to the CSS one:
<link rel="stylesheet" type="text/css" href="modelado.css">
It doesn't work correctly. my HTML file called "inicio.html" and "modelado.css" are in the same folder, but once I make the href, the console says this:
Not Found: /inicio/modelado.css
I think that the console is trying to find a folder called "inicio", but that's impossible since inicio is the HTML file from where I am running the program.
What I want to know is if there is another way to write the direction, because that directory doesn't exist.
I also think that this is a django related problem, because when I only use HTML, that line of code actually works when the files are in the same folder.
Thanks!
CSS is not a dynamic file (it is static) so by using
{% load static %}
<link rel="stylesheet" href="{% static 'yourstyle.css' %}">
you can load static files (like css).
More info here
This question already has answers here:
How to serve static files in Flask
(24 answers)
Link to Flask static files with url_for
(2 answers)
Closed 2 years ago.
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
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>
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">
I have a flask app which has both front and back ends. I am using flask_assets to serve both css and js assets.
assets = Environment()
assets.init_app(app)
js = Bundle(common_blueprint.name + '/dist/javascripts/scout.js', output='dist/javascripts/scout.js')
css = Bundle(common_blueprint.name + '/dist/stylesheets/base.css', output='dist/stylesheets/scout.css')
assets.register("js_all", js)
assets.register("css_all", css)
app.register_blueprint(common_blueprint)
Now are are running in a weird issue, every time I deploy the app and hit the url, the application doesn't load the css file.
After few browser hard refreshes the css file is served correctly.
Any help is appreciated.
Thanks
If there is no specific reason to use flask_assets I suggest you to store both js and css files under the folder static in your flask project folder with the structure:
FLASK_PROJECT/static/javascripts/ # for your js files
FLASK_PROJECT/static/stylesheets/ # for your css files
Then in your index.html / base.html file you would load the files as follows:
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='stylesheets/scout.css') }}">
<script type="text/javascript" src="{{ url_for('static',filename='javascripts/scout.js') }}"></script>
For more information you can take a look here
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 21 hours ago.
I'm developing a flask app with the following folder structure:
|-->flask_app.py
|-->static
|-->css
|-->bootstrap.min.css
|-->styles.css
|-->js
|-->jquery-3.1.1.min.js
|-->bootstrap.min.js
|-->script.js
|-->templates
|-->index.html
What is the proper way to link to these css and js files in index.html and what parameters do I need associated with them?
My CSS links look like this and are located in the header:
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
And my JS links look like this and are located at the end of the body tag:
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
Is this the correct syntax? Are they located in the correct spots in my templates (I'm sure there's flexibility here)? And are there any other parameters I should pass in (e.g. type="text/css", type="text/javascript", media="screen")?
Everything is working as expected but I want to follow recommended practice if there is any.
As the Flask documentation mentions, you should store .css and .js files within your static folder and for organizational purposes, its fine to have each type of file as subdirectories (especially as your app grows).
Per this SO answer, you don't need to have type="text/css" or type="text/javascript" in the jinja expression.