I'm having trouble linking CSS to an HTML page. Both files are in the same directory but I'm getting this in the terminal when I run on local port in Chrome ('test3' is the html file):
Not Found: /test3/sidebar.css
[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233
No matter how I alter the href path get some variation of this issue unless I include the directory name:css file name, but even then the HTML file doesn't inherit the CSS styling.
I'm working on a sidebar nav, which is why the names are the way they are but I just included a test line I'm using below:
.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testang</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="sidebar.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> Test </h1>
</body>
</html>
If I input the href like
<link href="requests:sidebar.css" rel="stylesheet" type="text/css">
I don't get the error but I still don't see the CSS changes ('requests' is the name of the directory).
.css file:
h1 {
color: red;
font-size: 50px;
}
I just switched from PyCharm. Once I got Atom set up I opened the project in Atom from the PyCharm folders. Everything else seems to work fine.
The code looks good, there is no typo in it. Make sure you have the CSS file and the HTML file in the same folder and they are not text files and they have extensions and, of course, that the files are saved.
test3 is the parent directory?
Is it just HTML and CSS or is it a Django project?
Since the CSS file is in the same folder, you could try something like this:
<link href="./sidebar.css" rel="stylesheet" type="text/css">
The dot tells the browser to search in the same folder as the HTML.
At the very beginning of your HTML file add:
{% load static %}
and change
<link href="sidebar.css" rel="stylesheet" type="text/css">
to something like this:
<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
I created a folder in the main project directory called "static", then created a directory within that called "css". Then, and this was the big thing missing for me, went into the project's settings.py and created the STATICFILES_DIRS path to that new folder.
From what I've read I'll need some additional work when I push this to production.
# Static files (CSS, JavaScript, Images)
https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
"full folder path to static folder"
]
Then in the HTML file I entered:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>
The key parts are the load static at the top and the href to {% static 'css/sidebar.css' %}.
Related
I am making a Django app and when I try to run the different pages the HTML is loading but not the CSS, when I open the files normally (not from the server) it all works fine, but when I run them through the server it searches for the CSS at the URL page. Here is an example:
at URL:http://127.0.0.1:8000/profile/create/
the HTML is all working but CSS isn't and I get this in the terminal:
[21/Dec/2022 10:11:54] "GET /profile/create/ HTTP/1.1" 200 1374
Not Found: /profile/create/style.css
[21/Dec/2022 10:11:54] "GET /profile/create/style.css HTTP/1.1" 404 2993
The HTML and CSS are in the same directory and here is my connection from my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>MyPlantApp</title>
</head>
You need to create a folder for your static files and store all your static files there.
Set your static files directory using this code in your settings.py file:
STATICFILES_DIRS = [
(os.path.join(BASE_DIR, "static/")),
]
Your static folder should look like this static file folder.
Also you need to use the proper templating syntax to specify find your static files. Change this:
<link rel="stylesheet" type="text/css" href="style.css">
to this:
<link rel="stylesheet" type="text/css" href="{% static 'static/style.css' %}">
Have you tried putting / before style.css?
You are trying to get style.css from relative path of HTML file.
If u put / before style.css it will try to get css file from root directory.
/style.css instead of style.css
<!-- Your Code -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Might help -->
<link rel="stylesheet" type="text/css" href="/style.css">
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 have this html file called register.html.
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Rancho" rel="stylesheet">
<!-- Custom css Style -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="hello">Hello</h1>
</body>
</html>
The css file is in the same folder as the html file.
This is the style.css file.
.hello {
font-size: 100px;
}
When I run the code it says that the resource style.css can not be loaded.
When I open the raw file using safari it work but when I use the flask server it doesn't work.
Whats wrong with my code?
style.css most probably is being resolved by the browser to something like http://your-server.com/style.css (implying you are viewing it from index.html from the root of your server), so if your file is not in the same directory or the web server is not configured to serve such files, the browser won't load it.
May be it's a path error. style.css are not available on that specific path.You can check complete error by inspect element on your browser console or in application logs too.
I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!
My Sinatra app has typical file hierarchy:
root contains:
file "hc.rb"
file "endpoints.yml"
dir "views"
dir "public"
"view" contains .erb files
public dir contains:
file "style.css"
dir "images"
in dir images I have favicon and 404 pictures.
here is part of the code:
not_found.erb
<center><img src="images/404.png" alt="404 Not Found"></center>
hc.rb
not_found do
erb :not_found
end
layout.erb
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="icon" href="images/favicon.ico"/>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<section>
<%= yield %>
</section>
</body>
</html>
When I type localhost:[port]/smthnonexisting
I get 404 image on the screen
But when I type additional level
localhost:[port]/smthnonexisting/andsmthmore
I do not see the image and I see only 404 Not Found and broken image ico.
What can be the reason?
Thanks
The reason for this is that you're using a path relative to the current folder. When you visit http://localhost/smthnonexisting your browser is looking for the styles.css file at /styles.css. When you visit http://localhost/smthnonexisting/andsmthmore, your browser is looking for the styles.css file at /smthnonexisting/styles.css.
This is solved by keeping your references relative to the 'root' folder, by a / before styles.css, like so:
<link rel="stylesheet" href="/styles.css">
You should also do the same with the favicon, and any other included files:
<link rel="icon" href="/images/favicon.ico" />