I am writing a web app with Flask in Python and I want to style my HTML pages with CSS but I can't manage to create a link between HTML and CSS. I've tried several times to move some files and folders and to use other means but nothing has worked.
Here is my directory:
App (folder):
- main.py
- website (folder)
__init__.py, auth.py, models.py, views.py
- static (folder) -> styling.css (inside)
- templates (folder) -> base.html, home.html (inside)
In my 'base.html' template, I've written:
<script
type="text/css"
src="{{ url_for('static', filename='styling.css') }}"
></script>
But it doesn't work (when I click on the link in VSCode, it tells me that the file doesn't exist (it searches in the template folder). Do anyone see any error please?
You are using wrong tag for including css file. You have to use link tag.
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
Edit:
Another problem after including the file is that browsers save cache and sometime doesn't pick up changed static files.
For that you to hard reload or sometime clear cache.
Here is a article for major browsers on how to hard reload.
To see different options of reloading, open inspect tab and right click on reload button at side of search bar.
not familiar with Python, but in HTML you have to import the css with the <link/> tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../static/styling.css"> //relative link to the css
</head>
<body>
</body>
</html>
reference: https://www.w3schools.com/css/css_howto.asp
I hope it works
Do you have a <head> section in your base.html file?
It should look like this...
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
</head>
<body>
<!--Your Body Content Here -->
</body>
Related
I am having a nightmare getting custom css to load into a Flask HTML template. I have tried everything I can think of, and haven't really had this issue before but am stumped now. File tree as follows:
/static
/css
styles.css
/templates
index.html
main.py
Index.html is rendering correctly, but css is not applied or loaded. index css link as follows:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/styles.css') }}">
</head>
Any help is appreciated!
Try adding css externally without using 'url_for'.
In your case try the following:
<link rel="stylesheet" type="text/css" href="./static/css/styles.css">
I cant load css file in my web page it just gives me a simple page without css elements as shown in the screenshot and says it cant load local resource Page and inspect elememt
I've loaded the static files in settings
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'assets')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
added url
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
used this in html
{%load static%}
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
<link rel="stylesheet" href="{% static 'assets/styles/style.css' %}">
</head>
also did manage.py collectstatic
followed the docs dont know where i went wrong
You should use a link tag:
<link rel="stylesheet" href="{% static 'assets/styles/style.css' %}">
That is enough to load the file; so you don't need the following:
{% include "assets/styles/style.css" %}
and also, you should change your settings like below if your css file is in BASE_DIR/assets/style.css:
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'assets')
]
I have a CSS file style.css stored in a CSS folder and tried using <link rel="stylesheet" type="text/css" href="style.css"> to link it into the HTML file. I got a 404 not found error from this and am not sure what I am doing wrong.
Below is the code (there is not much at the moment):
{% extends "base.html" %}
{% block body %}
<div class="MainBody">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="w3-container w3-padding-32 w3-hide-small center-align">
<h1>About Us</h1>
</div>
</div>
{% endblock %}
This shows the full path of style.css within the project
Please let me know what is being done incorrectly.
Actually, you answered your own question:
I have a CSS file style.css stored in a CSS folder
Your href attribute should look something like: href="/css/style.css"
The href should should have the path where the file is located along the file name not only the file name.
Example :
<link rel="stylesheet" type="text/css" href="./css/style.css">
we use "./" to search in the current folder.
we use "../" If you want to come back from the current folder.
Try this:
In the href, would you not leave the first / off? I thought that would go to a root folder. Try and eliminate that first slash and see what happens. As was said, the 404 is because it's looking in the wrong place.
I see this is a structure of a Flask app. In Flask, the CSS files and other assets should by default be stored in the static directory which should be directly inside your home directory.
Your file structure should look like this:
TSAWeb_App
|__ templates
|__ index.html
|__ static
|__ CSS
|__ style.css
Then you to access it inside the web app, first import url_for method
from flask import Flask, url_for
Then you can refer to CSS file as:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/style.css') }}">
Then when the app is run, the href tag will have the correct value set
UPDATE: If you're using Django, see this doc
Configuring static files
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag
to build the URL for the given relative path using the configured
STATICFILES_STORAGE.
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Store your static files in a folder called static in your app.
For example my_app/static/my_app/example.jpg.
I'm trying to incorporate the Carousel example template into my project: http://getbootstrap.com/examples/carousel/
This is my HTML. The CSS and JS files load fine. To give you a good idea of what exactly is missing, here is my page: http://i.imgur.com/OvcSKsj.png
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<script src="{{ STATIC_URL }}js/jquery.min.js"></script>
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/bootstrap-theme.min.css">
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<title>Carousel Template for Bootstrap</title>
</head>
<!-- NAVBAR
================================================== -->
<body>
# The body was directly copy-pasted, except that the bootstrap.js and jquery.js
# files were moved to the top of the page from the bottom for debug convenience
</body>
Edit: I forgot that you have to initialize it with $('.carousel').carousel();. I added that just before the carousal HTML, but it still does not work.
Answered in another post
I will quote it here as I think this might be your problem.
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page .
The code to run the carousel is
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
You can put it either in the after the two other scripts
or where the other scripts are now.
I am using html base tag in head but not working very well.
This is my folder structure.
- BaseWebsite (Folder)
- - Root (Folder)
- - default.html
- - css (Folder)
- - js (Folder)
- - image (Folder)
in IIS, i create a new web site pointing to BaseWebsite and made Root an application.
This is my code in default.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script language="javascript" src="js/site.js" type="text/javascript"></script>
</head>
<body>
<img src="image/site.jpg" />
.
.
.
</body>
</html>
When I run the page, css is there with the href="Root/css/site.css" but js and image are missing with the src starting js/site.js and image/site.jpg
So I put this after <head>
<base href="/Root/" />
Now, both js and image are showing but css is not showing as the href becomes href="/Root/Root/css/site.css"
Is it normal or how do I solve this? I can solve it by change href of css to /Root/css/site.css but there are a lot of places to change.
i dont know how behaves ISS, but try with dot:
<link rel="stylesheet" type="text/css" href="./css/site.css" />
i hope it helps
brief explanation:
"./" starts where default.html is.
long explained here:
What does "./" (dot slash) refer to in terms of an HTML file path location?
In a base element, the href attribute must be an absolute URL, such as http://www.example.com/foo/bar/. A URL that begins with / (or .) is relative.
You need to fix the absolute URL or use some other technique, such as a server-side programming tool or a preprocessor.