title: CSS file won't load - Django
body: <p>I'm having trouble loading my CSS files. The browser that I'm using is Chrome. 
  Here are my codes and file directories.
  Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/C53Qh.png" rel="nofollow noreferrer">file directories</a></p>
  
  <p>• ecommerce/ecommerce/settings.py</p>
  
  <pre><code>import os
  
  # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
  BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  ....
  
  # SECURITY WARNING: don't run with debug turned on in production!
  DEBUG = True
  
  ALLOWED_HOSTS = []
  
  
  # Application definition
  
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
  
      'store.apps.StoreConfig',
  ]
  
  ....
  
  # Static files (CSS, JavaScript, Images)
  # https://docs.djangoproject.com/en/3.0/howto/static-files/
  
  STATIC_URL = '/static/'
  
  
  STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/')
  ]
  </code></pre>
  
  <p>• ecommerce/ecommerce/urls.py</p>
  
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('', include('store.urls'))
  ]
  </code></pre>
  
  <p>• ecommerce/ecommerce/static/css/main.css</p>
  
  <pre><code>body{
      background-color:blue;
  }
  </code></pre>
  
  <p>• ecommerce/ecommerce/store/templates/store/store.html</p>
  
  <pre><code>{% load static %}
  &lt;link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"&gt;
  
  &lt;h3&gt;store&lt;/h3&gt;
  
  &lt;img src="{% static 'images/cart.png' %}"&gt;
  </code></pre>
  
  <p>• ecommerce/ecommerce/store/urls.py</p>
  
  <pre><code>from django.urls import path
  
  from . import views
  
  urlpatterns = [
          #Leave as empty string for base url
      path('', views.store, name="store"),
      path('cart/', views.cart, name="cart"),
      path('checkout/', views.checkout, name="checkout"),
  
  ]
  </code></pre>
  
  <p>• ecommerce/ecommerce/store/views.py</p>
  
  <pre><code>from django.shortcuts import render
  
  # Create your views here.
  def store(request):
       context = {}
       return render(request, 'store/store.html', context)
  
  def cart(request):
       context = {}
       return render(request, 'store/cart.html', context)
  
  def checkout(request):
        context = {}
        return render(request, 'store/checkout.html', context)
  </code></pre>