Whenever I run my HTML through a server, it doesn't seem to connect with my CSS file

I'm currently developing a Django app, and I have encountered an issue where the CSS is not loading when I run different pages through the server. Oddly enough, everything works fine when I open the files directly without using the server. The problem seems to be that the server is searching for the CSS at the URL page itself. For example, when I visit , the HTML loads correctly but the CSS doesn't, and the terminal displays the following message:

[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

Both the HTML and CSS files are located in the same directory. Here is how the CSS file is connected from my HTML file:

    <!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>
htmlcssdjango

Answer №1

To properly manage static files in your project, it is important to create a dedicated folder for them and store all static files there.

In order to set the directory for your static files, add the following code snippet to your settings.py file:

STATICFILES_DIRS = [
(os.path.join(BASE_DIR, "static/")),
]

Your static folder structure should resemble the one shown in this example static file folder.

It is also crucial to utilize the correct templating syntax when referencing static files. Replace instances like:

<link rel="stylesheet" type="text/css" href="style.css">

with:

<link rel="stylesheet" type="text/css" href="{% static 'static/style.css' %}">

Answer №2

Have you considered adding a / before the style.css file path? By including a leading forward slash, the browser will look for the css file starting from the root directory instead of a relative path.

So it should be /style.css instead of just style.css

<!-- Your Code -->
<link rel="stylesheet" type="text/css" href="style.css">

<!-- Recommended Update -->
<link rel="stylesheet" type="text/css" href="/style.css">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

I am currently working on converting Word documents to clean HTML. I have been using Apache POI, but it seems to create messy output similar to MS Word's own HTML saving method. What I really need is a solution like the one offered by . For instance, ...

javahtmlcssms-wordapache-poi

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

Bypass the cleaning process for videos in html5lib

I am currently utilizing a wmd-editor within my Django project, similar to the one I am using to type this message. My goal is to enable users to embed videos into their content. To achieve this, I have incorporated the Markdown video extension. However, I ...

pythondjangosanitizationhtml5lib

ngInfiniteScroll Activates on Every Scroll Occurrence

Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...

javascriptcssangularjsnginfinitescroll

Chrome is where all the action happens, while Firefox prefers to keep things on the left

After a long break, I returned to designing my website and re-learning CSS. My approach involved creating a WordPress-integrated site with minimal HTML/PHP work, focusing more on utilizing the available CSS classes and IDs provided by a template theme (Bla ...

phphtmlcsswordpresscenter

What is the best way to retrieve the most recent comment?

I seem to be facing a minor issue. Specifically, I am unsure how to extract the last comment when I use 'post.comments.all' class CommentPost(models.Model): user = models.ForeignKey(Profil, on_delete=models.CASCADE) post = models.Fore ...

pythondjangotemplates

Adjusting the border size of an SVG without using the viewbox

Currently, I am working with 2 SVGs where one has a viewbox and the other doesn't. They both are set to be 100% width of the parent element. The first SVG scales according to its viewbox while the second one scales according to the height of the paren ...

htmlcss

Unable to execute the Unisubs (amara) repository on GitHub

Within the repository at https://github.com/pculture/unisubs, I attempted to follow the "Quick start" guide, but encountered an error at step 3: "... Get:13 trusty/universe amd64 Packages [7589 kB] Fetched 20.8 MB in 53s (391 kB/s) W: Failed to fetch Ha ...

pythondjangodocker-composeamara

Strategies for reducing the amount of space between cards in Bootstrap 4

After creating 4 cards using Bootstrap version 4.5, I noticed that the spacing is not right. I'm struggling to reduce the spacing between the cards. Have a look at the image below if you're still confused: https://i.sstatic.net/RrJLL.jpg .car ...

htmlcssbootstrap-4

Unable to alter the background color in a table row when a condition is verified

Within my 'work' array that is generated from an Excel file, I have values for employee_id (referred to as id), projects, and hours. Additionally, I have another array called 'employees' which contains all the employees in my database. ...

phphtmlcssarrayslaravel

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular

Different types of video formats used for html5 video players

Looking for some guidance here. I'm currently in the process of developing a website that allows users to upload their own videos. For the video player, I've opted for the HTML5 player by . My main concern is ensuring that the HTML5 player can on ...

phpjavascripthtml

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Tips on sending multiple lists of field data to a child model along with the parent model

In my application, I have two models called Visit (parent model) and VisitAccessories (child model). When I post data for VisitAccessories, only the last element of the list is being added and the record is created, while the other elements are being ignor ...

djangodjango-rest-frameworkdjango-views

Tips for accessing form data that has been automatically uploaded in PHP

I've been trying to automatically post data using JavaScript and retrieve it in a PHP file. However, I am facing an issue where the PHP file is not able to retrieve the data. I have set up an automatic form that takes input from another form and send ...

javascriptphphtml

Discover the Color's Value in Relation to a Different Color

When it comes to my CSS, I like to use .scss to make as many variables as possible. It's easy to create a variable for one color, like $primary-color. From there, I want to work with different shades of that color, which I can easily pinpoint using Ph ...

csscolorssass

Steps to include an argument in a function within a python .bat file

I have two separate files, one containing a function and the other calling that function. I then execute a .bat file. However, I am unsure of how to include an argument when running the .bat file so that the argument can be passed to the function as shown ...

pythonpython-3.xdjangoshellbatch-file

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and ...

htmlcss

Successfully changing the source and tracking of a video through an onclick button, but the video content remains unchanged

I apologize if this post is a duplicate, but I couldn't find the answer in previous threads. I'm attempting to change the video source using an onclick button. However, even after changing the source, the video remains the same. <video width ...

javascripthtmlvideo