I'm Trying to run a basic test using an external CSS file to color some HTML text but it isn't working. I Have checked the location of the CSS file and the HTML files and they are in the same place.
I Have tried moving the files around so they are in the same place. I have a feeling this is the issue though.
CODE:
h2 {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>This is the title</h2>
<p>Lorem ipsum</p>
</body>
</html>
The HTML file and CSS file are saved under Templates which is a folder created to hold all front end files in my Django project. Could the file path be a reason?
The This is the title isn't changing colour to red as expected.
UPDATE: Solved it.
It was a Django problem, Django requires you to place a directory with the settings.py so it can reference the static files aka the css files.
In settings.py it looks like this, amend your directory to suit:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/Users/benja/WDTimesheetProject01/templates/css/',
]
STATIC_URL = '/static/'
Then in the HTML, at the very top you place:
{% loadstatic %}
Which gives you the final file with correctly loaded css:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
<h2>This is the title</h2>
<p>Lorem ipsum</p>
</body>
</html>
Thanks all!
Try restarting your browser or event testing it on a different browser; I had this kinda problem a couple of time and that was my way out
Related
my django project wont find my css file. Spelling is correct, path is correct, lower and upper cases are correct, its linked in the head part. ive been searching for 2 hours now.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../src/Templates/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
-->
<title>Document</title>
<style>
.form-control{
width: 50%;
}
</style>
</head>
<body>
<div class="container" id="thisone">
<h3 class="">BlaBlaBla!</h3>
<h5>{{ message }}</h5>
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
is this a stupid fail of mine?
Greetings
Check Your path again,
If it's correct
Follow the Guidelines to Include CSS in Django Project
Static files are intended to wrap CSS files and your images, Django automatically identifies this file.
Create static folder in your app folder, same directory as of migrations and template folder
Create css Folder and insert it into static Folder
Now put your styles.css into css folder
Now in your HTML File where you want to include CSS, add {% load static %} On the top of HTML File and Your Path should be like this <link rel="stylesheet" href="{% static 'css/styles.css' %}"> in HTML file.
Then Make Change To Your settings.py in projectfoldername with-
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
Then Run this command
python manage.py collectstatic
You static file will be copied to New file created by django as assets.
If it does not reflect changes Refer here If it does not work
According to the official statement "Generally, the templates folder is created and kept in the sample directory where manage.py lives. This templates folder contains all the templates you will create in different Django Apps."
As a Django projects grow in size it's often more convenient to have all the templates in one place rather than hunting for them within multiple apps.
Just as an additional information for the accepted answer's 1."Statement"
Besides, yes you should have your static folder at App-level and it should work!.
When I open the html file in chrome or IE, the background color and font size doesn't change and I don't know why.
Is it the way I linked to the css file from the html ? Is the path wrong? Should I use / instead of \ in the path name? Is the css content of the css file ok?
This is the head section of my html document (notepad):
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/CSS3/css/styles"/>
</head>
This is the content of my .css document (I'm using notepad):
h1{
background:#B3B3B3;
font-size:150%;
}
My css file is located here --> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
My html file is located here--> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\html
Since you are using external CSS:
HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/home/bhavya/Desktop
/styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Content of styles.css document
body {
background-color: powderblue;
}
h1{
background:#B3B3B3;
font-size:150%;
}
So the reultant output will be:
Update 1:
I think there is some syntactic error in the path which you are using C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
DO CHECK YOUR PATH AGAIN, AND DONT FORGET TO SAVE YOUR CSS FILE WITH .css extension AND YOUR HTML FILE WITH .html extension
I had a folder with 2 folders in them. One named html and the other css. I fixed this by deleting the html folder and putting the html document in the folder, like this:
revised file path
I also changed the <head> link in the html file, like this: <link rel="stylesheet" href="css/style.css"> and it worked.
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' %}.
I am new to html and I tried to create my webpage with the html as follows
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1> My web page </h1>
</body>
</html>
And the following css
h1{
color: red;
}
I tried adding a class to the h1 and styling it that way but in vain. If i do the css in style tags inside my html file it works but i want to have it in a main.css file
I want the h1 to have the color red, also I would want the css in a separate file, no the same one as my html so that it will be clean
If I am not mistaken you did not link your css file to the index.html, try something like this
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<link rel="stylesheet" type="text/css" href="./main.css">.
</head>
<body>
<h1> My web page </h1>
</body>
</html>
But try to replace ./main.css with the actual path of your main.css reffer to this for more info.
In the head section you have to link the html file to your css file.
Place the following code within <head> tags:
<link rel="stylesheet" href="[the path to your CSS file]">
It is usually this tag
<link rel="stylesheet" href="yourfilename.css">
But I think the problem you might be facing is the path of your css. Where is your css file located if it is inside a folder like a style folder then you would do something like this.
<link rel="stylesheet" href="style/yourfilename.css">
You need to import the css in the HTML file
I've been struggling for hours to include the Bootstrap CSS file into my file. My code snippet is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css"> <!--Works fine now, but not with local path -->
<title>Welcome</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1> Hello </h1>
<p> world </p>
</div>
</div>
</section>
</body>
</html>
This works perfectly and the Bootstrap shows up just fine. However, I wish to include the localized files. The moment I change the link in the head of the code to <link rel="stylesheet" href="resources/bootstrap.css" type="text/css">, The bootstrap disappears.
Just to make sure and convince you that the bootstrap.css is indeed there at resources/bootstrap.css I included <%# include file="/resources/bootstrap.css"%> at the top of the code and it actually showed me the entire content of the file.
What am I missing? How do I resolve this?
If you have this project structure (I suggest trying this,because resource folder content is not used for static web contentnt ):
|_webapp
|_css
|_bootstrap.css
you can load the css by
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.css" type="text/css">