How to Add CSS Files in Django — Step-by-Step Guide
Last updated 3 weeks, 2 days ago | 81 views 75 5
Adding CSS (Cascading Style Sheets) to your Django project allows you to customize the visual appearance of your web pages. Whether you're styling buttons, layouts, or entire templates, integrating CSS properly is essential for any Django-based website.
This article will walk you through how to add and use CSS files in Django with real code examples, folder structure, and common pitfalls to avoid.
✅ Prerequisites
Ensure you have:
-
Django installed (
pip install django) -
A basic Django project created (
django-admin startproject) -
An app created and added to
INSTALLED_APPS
Step-by-Step: Adding CSS in Django
Step 1: Update settings.py
In your project’s settings.py, configure static files (if not already configured):
import os
# URL to serve static files
STATIC_URL = '/static/'
# Optional: additional static directories
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
✅ This tells Django where to look for your CSS and other static files.
Step 2: Create Static Directory
Create a static/ directory at the project root, not inside the app yet.
myproject/
├── static/
│ └── css/
│ └── styles.css
Alternatively, you can organize CSS per app like:
myapp/
├── static/
│ └── myapp/
│ └── css/
│ └── app.css
Both are valid — choose based on your preference for centralization or modularization.
Step 3: Load CSS in Your Template
Open a Django template (e.g., home.html) and do the following:
-
Load the
{% static %}tag -
Link to your CSS file using
href="{% static 'path/to/file.css' %}"
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Styled Page</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<h1>Hello Django with CSS!</h1>
</body>
</html>
If the CSS file is inside your app (e.g., myapp/static/myapp/css/app.css):
<link rel="stylesheet" href="{% static 'myapp/css/app.css' %}">
Step 4: Start the Development Server
Run the development server:
python manage.py runserver
Django will automatically serve static files when DEBUG = True.
Visit http://127.0.0.1:8000/ to see your styles in action.
✅ Example CSS File (styles.css)
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
Full Working Example
Project Structure
myproject/
├── myapp/
│ ├── templates/
│ │ └── home.html
├── static/
│ └── css/
│ └── styles.css
├── myproject/
│ └── settings.py
├── manage.py
home.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<title>Styled Page</title>
</head>
<body>
<h1>Hello, styled Django!</h1>
</body>
</html>
styles.css
body {
background-color: #eef;
}
h1 {
color: #333;
font-size: 2rem;
text-align: center;
}
settings.py (static part)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
Tips for Using CSS in Django
| Tip | Description |
|---|---|
✅ Use {% load static %} |
Required in every template where you reference static files |
| Organize files | Use folders like css/, js/, and images/ for clarity |
| Use app-specific folders | Helps modularize static content per app |
| Cache-busting | Add version suffixes to CSS (e.g., styles.v2.css) or use ManifestStaticFilesStorage in production |
| Test paths | Use browser DevTools to confirm CSS files are loading and not giving 404s |
⚠️ Common Mistakes and How to Fix Them
| Mistake | Problem | Solution |
|---|---|---|
❌ Not loading {% static %} |
Template errors or broken links | Add {% load static %} at the top |
❌ Wrong path in href |
404 errors for CSS | Ensure correct relative path from static/ |
| ❌ CSS not reflecting changes | Browser caching | Clear cache or change filename |
❌ Missing STATICFILES_DIRS |
Static files not found | Add it if you use a central static/ folder |
| ❌ Files not found in production | collectstatic not run |
Use python manage.py collectstatic before deploying |
Summary
Adding CSS in Django is straightforward once you understand how static files work. Here's the quick checklist:
-
Configure
STATIC_URLandSTATICFILES_DIRSinsettings.py -
Create a
static/css/directory -
Add and write your
.cssfiles -
Use
{% load static %}and<link>tags in templates -
Run your server and test the styling
