When i use extends in django, my css files not working anymore

So first i write my code without extends and i am trying to use the extends feature now, normally my codes working without any problem but when i use {% extends 'base.html' %} css files stopped working. So do you guys have any idea to resolvation of this problem? And if you have another advices to this project please let me know.

```


 {% extends 'base.html' %}
    
    {% load static %} 
    **head of home.html**
    <!DOCTYPE html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="{% static 'css/home.css'%}">
    
        <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
        <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    
        <link type="text/css" rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
        <script type="text/javascript" src="{% static 'js/swiper.min.js' %}"></script>
    
        <title>kannom biraki enihime aratame</title>
    </head>
     **this is body of home.html** 
    <body>
        {% block content %}
    
        <div class="swiper mySwiper">
            <div class="category-header">
                <h1>bracelets</h1>
            </div>
            <div class="swiper-wrapper">
                {% for bracelet in bracelet_list %}
                <div class="swiper-slide">
    
                    <div class="slider-box">
                        <p class="time">New</p>
                        <div class="slider-image-box">
                            <img src="{{bracelet.image}}" alt="{{bracelet.title}}">
                        </div>
                        <p class="slider-detail">{{bracelet.title}}</p>
                        <p class="slider-price">{{bracelet.price}}</p>
    
                        <div class="slider-cart">
                            <a data-product="{{bracelet.id}}" class="add-to-cart" data-action="add"> Add to Cart </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
                <!-- <div class="swiper-slide">
    
                    <div class="slider-box">
                        <p class="time">New</p>
                        <div class="slider-image-box">
                            <img src="{% static 'images/sponge-bob.jpg' %}" alt="">
                        </div>
                        <p class="slider-detail">Black ladies bags collections</p>
                        <p class="slider-price">30$</p>
    
                        <div class="slider-cart">
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </div>
    
                <div class="swiper-slide">
    
                    <div class="slider-box">
                        <p class="time">New</p>
                        <div class="slider-image-box">
                            <img src="{% static 'images/sponge-bob.jpg' %}" alt="">
                        </div>
                        <p class="slider-detail">Black ladies bags collections</p>
                        <p class="slider-price">30$</p>
    
                        <div class="slider-cart">
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="category-header">
            <h1>all products</h1>
        </div>
        <div class="page-container">
            <div class="container">
                {% for product in product_list %}
                <div class="card">
                    <div class="image">
                        <img src="{{ product.image }}" alt="{{product.title}}" width="90%">
                        <ul class="action">
                            <li>
                                <a class="add-to-cart" data-product="{{product.id}}" data-action="add"></button>
                                    <i class="fa-solid fa-cart-shopping"></i>
                                    <span>Add to Cart</span></a>
                            </li>
                            <li>
                                <i class="fa-solid fa-heart"></i>
                                <span>Add to Wishlist</span>
                            </li>
                            <li>
                                <i class="fa-solid fa-circle-info"></i>
                                <span>Get Info</span>
                            </li>
                        </ul>
                        <!-- <a data-action="add" data-product="{{product.id}}"><i class="fa-solid fa-cart-shopping"></i></a> -->
                    </div>
                    <div class="content">
                        <div class="product-name">
                            <h3>{{ product.title }}</h3>
                        </div>
                        <div class="product-price">
                            <h3>{{product.price}}$</h3>
                        </div>
                    </div>
                </div>
                {% endfor %}
    
            </div>
        </div>
        {% endblock %}
    
        <footer>
            <div class="footer-content">
                <h3>lira kuyumculuk</h3>
                <p>Lira kuyumclugu tercih ettiginiz icin tesekkur ederiz! Daha fazla bilgi icin bizleri sosyal medya
                    uzerinden takip edebilir, guncel bir sekilde yeni gelen urunlerimizi takip edebilirsiniz.</p>
                <ul class="footer-socials">
                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
                    <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                </ul>
            </div>
            <div class="footer-rights">
                <p>Tum haklar Lira Kuyumculuk A.S tarafindan saklanmistir</p>
            </div>
        </footer>
    
        <script>
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 4,
                spaceBetween: 30,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        </script>
        <script src="{% static 'js/cart.js'%}"></script>
        <script>
                        var user = '{{request.user}}'
                        console.log(user)
    
                    function getCookie(user) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, user.length + 1) === (user + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(user.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            const csrftoken = getCookie('csrftoken');
    
        </script>
    </body>

**this is base.html**

    ```{% load static %}
    
    <!DOCTYPE html>
    
    <head>
        <meta name="viewport" content="with=device-width, initial-scale=1.0">
        <title>yokoso, watashi wa soul soceity!</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" />
    </head>
    
    <body>
        <!-- {% include 'navbar.html' %} -->
        {%block content%}
        {%endblock%}
        
    
    </body>
    
    </html>```

instead of this:

<head>
        <link rel="stylesheet" type="text/css" href="{% static 'css/home.css'%}">
    
        <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
        <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    
        <link type="text/css" rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
        <script type="text/javascript" src="{% static 'js/swiper.min.js' %}"></script>
    
        <title></title>
    </head>

Do this:

<head>
    
        <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
        <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    
        <link type="text/css" rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
        <script type="text/javascript" src="{% static 'js/swiper.min.js' %}"></script>
    
        <title>kannom biraki enihime aratame</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/home.css'%}">
    </head>

Just added css file just below title tag. And remove load static and css file from template not from base.html

Try this right now and tell

So i tried to import all the css and js files to base.html's header section, it gave me some css files but it looks like, my css files are in some conflict. So lesson one learned that its hard to combine your codes if you split it too much.

Back to Top