How to get CSS to show in HTML

Question

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.

Yes - both in same exact folder. It's in the templates folder inside of django app. So it goes app name>templates>app name>html & css files — blueblob26, Apr 15 '20 at 22:24
Have you tried emptying the browser cache? Open the Chrome DevTools, then right click the refresh button and select "Empty Cache and Hard reload". — agrm, Apr 15 '20 at 22:26
In case anyone checks this out I did end up figuring this out with help from the comments and posts. Not sure if anyone is able to remove the negative on the post. Posted answer below as answer post. — blueblob26, Apr 21 '20 at 00:41

score 0 · Answer 1 · edited Apr 21 '20 at 21:33

0

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?

edited Apr 21 '20 at 21:33

the Tin Man

158,662
42
215
303

answered Apr 15 '20 at 22:39

EWR

106
3

Well at least I know I'm not going crazy... But yes, it's a django project. test3 is the html file, I thought it odd it's giving the error like. The django app is called 'requests', so the folder structure inside that for the templates is requests>templates>requests>then the html and css files – blueblob26 Apr 15 '20 at 22:42
Can you please check if this helps you? https://stackoverflow.com/questions/24199029/django-cannot-find-static-files-need-a-second-pair-of-eyes-im-going-crazy – EWR Apr 15 '20 at 22:43
That looks promising but I couldn't get it to work. Now am having issues even getting runserver to work. Going to restart everything and try again. – blueblob26 Apr 15 '20 at 23:43
Please don't ask question to the OP in an answer. Use a comment instead. Remember, SO isn't a message list or forum, it's more like an online reference book. – the Tin Man Apr 21 '20 at 21:34

score 0 · Answer 2 · edited Apr 21 '20 at 21:36

0

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">

edited Apr 21 '20 at 21:36

the Tin Man

158,662
42
215
303

answered Apr 15 '20 at 22:43

anton

58
7

Just tried, didn't seem to work. Am getting this error ``"GET /static/sidebar.css HTTP/1.1" 404 1760``. Do I maybe need to move the css file to a new directory named 'static' or something like that? – blueblob26 Apr 15 '20 at 22:51
in test3 folder try to create another folder called static and put ur css file inside it and check if it works @blueblob26 – anton Apr 15 '20 at 22:57
test3 isn't a folder - that's the name of the html file. I don't know why the error is coming across like that when test3 is just an html file. – blueblob26 Apr 15 '20 at 23:01
@blueblob26 so create a static folder Next to test3 – anton Apr 15 '20 at 23:03
@blueblob26 for more details : https://docs.djangoproject.com/en/3.0/intro/tutorial06/ – anton Apr 15 '20 at 23:15

score 0 · Answer 3 · edited Apr 21 '20 at 21:35

0

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.

edited Apr 21 '20 at 21:35

the Tin Man

158,662
42
215
303

answered Apr 15 '20 at 23:10

Alberto Pumarejo

21
3

score 0 · Accepted Answer · edited Apr 21 '20 at 21:39

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' %}.

Welcome to SO and congratulations on your first answer! When creating a question or an answer, please be concise and clear, refraining from fluff - text that is merely conversational. Being informal and friendly is fine, but try to avoid text that doesn't really further the message. See https://meta.stackoverflow.com/q/260776/128421 and the related links to the right of that question for more information. Also, remember that grammar and proper capitalization is important. — the Tin Man, Apr 21 '20 at 21:44

How to get CSS to show in HTML

4 Answers4