Search code examples
djangodjango-staticfiles

How i can add static files (css) to django web project


I have tested to embedded css style into html template, but it doesn't load css files, my configure as below, could you please help assist ?

checkstatic\showstatic\templates\index.html

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en">
    <head>
        {% load static%}
        <link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
    </head>
    <body>
        <img src="{% static 'logo1.png' height="200" width="200" class="d-inline-block align-top" %}" alt="">
        <h1 class="test">hahahaha</h1>

    </body>
</html>

checkstatic\static\css\mystyle.css

.test{
    color: red;
}

my settings:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'showstatic'
]
...
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'checkstatic/static/')
]

when i access the index site, it only apply h1 tag, it can not load red color as the css config.


Solution

  • Statics are used to get and use complete files (css, images, js, etc), in your image it should be:

    <img src="{% static 'logo1.png' %}" height="200" width="200" class="d-inline-block align-top" alt="">
    

    Leaving the properties of the img outside the static block.