# {% load static%} does not work for extended Django html files

**URL:** <https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822>\
**Category:** Templates & Frontend\
**Created:** [February 13, 2023, 8:04pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822 "2023-02-13T20:04:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mdaw11](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@Mdaw11](https://forum.djangoproject.com/u/Mdaw11)\
**Post date:** [February 13, 2023, 8:04pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/1 "2023-02-13T20:04:05Z")

</div>

I am trying to load a CSS file located in my static files onto an extended django html file. The `{% load static %}` works in the base.html template but does not work anywhere else. I’m not sure how to proceed

Here is my code

base.html

```auto
{% load static %}
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="{% static 'styles/style.css' %}" />
    <title>My Site</title>
    {% block htmlhead %}
    {% endblock htmlhead %}
  </head>
  <body>
    {% include 'sidebar.html' %}
    
    {% include 'navbar.html' %}
    
    
    
    {% block content %}{% endblock %}
  
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="{% static 'js/script.js' %}"></script>
  </body>
</html>

```

here is an extended django html template

```auto
{% extends 'base.html' %}
{% load static %}
{% block content %}

<main id="content">
  <h1 class="title">Dashboard</h1>
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li class="divider">/</li>
    <li><a href="#" class="active">Dashboard</a></li>
  </ul>
  <div class="info-data">
  </div>
  <div class="project-home-data">
    <div class="project-content-data">
      <div class="project-head">
        <h3>Your Tickets</h3>
      </div>
      <div class="project-body">
        <table>
          <thead>
            <tr>
            <th>Project Name</th>
            <th>Description</th>
            <th></th>
            <th>Created</th>
            </tr>
          </thead>
          <tbody>
            <tr>
            <td><a href="">Hello</a></td>
            <td>Hello</td>
            <td></td>
            <td>Hello</td>
            
            </tr>
            
          </tbody>
        </table>
        <p>Showing 1 to 5 of 5 entries </p>
        <div class="pagination">
          <a href="#">&laquo;</a>
          <a href="#">1</a>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">4</a>
          <a href="#">5</a>
          <a href="#">6</a>
          <a href="#">&raquo;</a>
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}

```

What it currently looks like

[![enter image description here](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/0/08603a30d275834e22ebfe82607992e8217bfb56.png)](https://i.stack.imgur.com/cOQEp.png)

What it should look like

[![enter image description here](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/2/2206dd7dc164e1cd083eae47f3cbc951f6f1ec55.png)](https://i.stack.imgur.com/lDewj.png)

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 13, 2023, 8:17pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/2 "2023-02-13T20:17:05Z")

</div>

What’s making you think that the `load static` tag isn’t working? I don’t see where you have any `static` tags in that template where `load static` would even be used.

The `load static` tag does **not** load static files. It’s purpose is to allow you to use the `static` tag in your template.

What you want to look at here are the requests being made to the server. If you do a shift-refresh on the page, your server console should show requests for the static files in addition the requests for the page.

---

<div class="post-metadata">

**Author:** ![Mdaw11](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@Mdaw11](https://forum.djangoproject.com/u/Mdaw11)\
**Post date:** [February 13, 2023, 8:32pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/3 "2023-02-13T20:32:01Z")

</div>

I should rephrase then, why isn’t the CSS working for the extended django template?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 13, 2023, 8:35pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/4 "2023-02-13T20:35:53Z")

</div>

Examine the html that was rendered and sent to the browser. Examine the ancillary requests being made for that page in your console logs. Ensure you don’t have another base.html template that’s being loaded for that page. Verify that your css selectors are actually correct such that they would apply to the elements on your page.

---

<div class="post-metadata">

**Author:** ![sailorblack](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/sailorblack/32/12229_2.png) [@sailorblack](https://forum.djangoproject.com/u/sailorblack)\
**Post date:** [February 16, 2023, 2:57pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/5 "2023-02-16T14:57:33Z")

</div>

Your {% block content % } need to come before your {% load static %}

 ![image](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/3/3442ccd3432e6ee71e399f9398c3d341374b630d.jpeg)

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 16, 2023, 4:25pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/6 "2023-02-16T16:25:18Z")

</div>

That is not an accurate statement. The `load static` doesn’t directly affect the rendering, it just makes that tag library available for use. In this case it is irrelevent since he’s not using any static tags in his template.

Also, in the future, please do _not_ post images of code or templates. If you’re going to post code, copy/paste it into the body of your message, surrounded by lines of three backtick - ` characters. This means you’ll have a line of ```, then your code (or template), then another line of ```.

---

<div class="post-metadata">

**Author:** ![Faessal-sufi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/faessal-sufi/32/17617_2.png) [@Faessal-sufi](https://forum.djangoproject.com/u/Faessal-sufi)\
**Post date:** [December 7, 2023, 7:31am UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/7 "2023-12-07T07:31:09Z")

</div>

In your extended html file after loading the static you have not linked the css file. Use this tag to link the css file ` <link rel="stylesheet" href="{% static 'styles/style.css' %}" />` in

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [December 7, 2023, 1:21pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/8 "2023-12-07T13:21:14Z")

</div>

It’s not necessary to do that since the `style.css` is (should be) loaded in the base template. If it’s loaded by the base, it does _not_ need to be loaded in the template that extends the base.

---

<div class="post-metadata">

**Author:** ![gabbrenn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/gabbrenn/32/23427_2.png) [@gabbrenn](https://forum.djangoproject.com/u/gabbrenn)\
**Post date:** [August 24, 2024, 3:19pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/9 "2024-08-24T15:19:27Z")

</div>

I have same question. I load static in base.html but whenever i try to use it in child tempelate it require me to load it again in child tempelate  
**base.html**

```auto
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} Title {% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    {% include 'navbar.html' %}
    
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
    {% include 'footer.html' %}
</body>
</html>

```

**house-detail.html**

```auto
{% extends 'base.html' %}
{% block title %}House Details - HouseRentHub {% endblock %}

{% block content %}
<!-- Main Content -->
<div class="container property-info">
    <div class="row">
        <!-- Main Image and Thumbnails -->
        <div class="col-md-8">
            <div class="main-image">
                <!-- Default selected image -->
                <img id="mainImage" src="{% static 'img/villa.jpg' %}" alt="Main House Image">
            </div>
            <div class="thumbnail-images row mt-2">
                <div class="thumbnail-images row mt-2">
                    <div class="col-4">
                        <img src="{% static 'img/villa.jpg' %}" alt="Thumbnail 1" data-image="{% static 'img/villa.jpg' %}">
                    </div>
                    <div class="col-4">
                        <img src="{% static 'img/cozy.jpg' %}" alt="Thumbnail 2" data-image="{% static 'img/cozy.jpg' %}">
                    </div>
                    <div class="col-4">
                        <img src="{% static 'img/modern.jpg' %}" alt="Thumbnail 3" data-image="{% static 'img/modern.jpg' %}">
                    </div>
                </div>
                
            </div>
        </div>

        <!-- Property Information -->
        <div class="col-md-4">
            <h1 class="property-title">Cozy Apartment in Kigali</h1>
            <p class="property-price">$500/month</p>
            <p><strong>Description:</strong> A beautiful, fully furnished apartment in the heart of Kigali. This cozy apartment offers 2 bedrooms, a spacious living room, and a modern kitchen. The location is ideal for families and professionals, with easy access to local amenities.</p>
            <p><strong>Amenities:</strong></p>
            <ul>
                <li>2 Bedrooms</li>
                <li>1 Bathroom</li>
                <li>Fully Furnished</li>
                <li>Air Conditioning</li>
                <li>High-Speed Internet</li>
                <li>24/7 Security</li>
                <li>Parking Space</li>
            </ul>
        </div>

    </div>

    <div class="row">
        <p><strong>Location:</strong></p>
            <div id="map" style="height: 200px;"></div>
    </div>
</div>

<!-- Contact Section -->
<div class="container py-5">
    <h2>Contact the Owner</h2>
    <form class="contact-form">
        <div class="row">
            <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="col-md-6">
                <input type="email" class="form-control" placeholder="Your Email" required>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <textarea class="form-control" placeholder="Your Message" rows="5" required></textarea>
            </div>
        </div>
        <button type="submit" class="btn">Send Message</button>
    </form>
</div>

<script>
    document.querySelectorAll('.thumbnail-images img').forEach(function(thumbnail) {
    thumbnail.addEventListener('click', function() {
        var mainImage = document.getElementById("mainImage");
        mainImage.src = thumbnail.getAttribute('data-image');
    });
});

    // Initialize and add the map
    function initMap() {
        // The location of the property
        var propertyLocation = {lat: -1.944072, lng: 30.061885};
        // The map, centered at the property location
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            center: propertyLocation
        });
        // The marker, positioned at the property location
        var marker = new google.maps.Marker({position: propertyLocation, map: map});
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

{% endblock %}

```

**Result**

 ![a](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/5/5/55fb9a9e26bd1251bf837c1913226a014d201f8f.png)

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 24, 2024, 4:19pm UTC](https://forum.djangoproject.com/t/load-static-does-not-work-for-extended-django-html-files/18822/10 "2024-08-24T16:19:12Z")

</div>

> [@gabbrenn](#):
>
> I load static in base.html but whenever i try to use it in child tempelate it require me to load it again in child tempelate

That’s correct. That’s the proper and expected behavior.

Again, the `{% load static %}` tag doesn’t do anything in your template. It loads the definition for the `static` tag so that you can use `{% static ... %}` elsewhere in that template.
