🎨 What is Django Styling?

Django styling involves adding CSS files to your project to make web pages visually appealing. Django uses static files to manage CSS, JavaScript, and images efficiently.


# settings.py - Configure static files
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

Key Styling Concepts

📁

Static Files

CSS, JS, and images folder

myproject/
  static/
    css/
    js/
    images/

🔗

Load Static

Template tag for static files

{% load static %}

🎨

Link CSS

Connect stylesheet to template

<link rel="stylesheet" 
  href="{% static 'css/style.css' %}">

⚙️

Collect Static

Gather files for production

python manage.py collectstatic

🔹 Step 1: Configure Settings

First, configure your Django project to handle static files. Add these settings to your settings.py file to tell Django where to find and serve static files like CSS and JavaScript.

# settings.py
import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# Static files configuration
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / 'staticfiles'

🔹 Step 2: Create Static Folder

Create a folder structure for your static files. This organization helps keep your CSS, JavaScript, and images separate and easy to manage as your project grows.

# Create this folder structure in your project root
myproject/
├── myapp/
├── myproject/
└── static/
    ├── css/
    │   └── style.css
    ├── js/
    └── images/

🔹 Step 3: Create CSS File

Create a CSS file with basic styles for your Django application. This example shows simple styling for common HTML elements that you'll use throughout your templates.

/* static/css/style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

🔹 Step 4: Link CSS in Template

Use Django's template tags to link your CSS file. The {% load static %} tag enables static file functionality, and {% static %} generates the correct URL for your CSS file automatically.

<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Django App</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <div class="container">
        <h1>Welcome to Django!</h1>
        {% block content %}{% endblock %}
    </div>
</body>
</html>

Output:

Welcome to Django!

🔹 Step 5: Using Bootstrap (Optional)

You can also use CSS frameworks like Bootstrap for faster styling. Simply include the Bootstrap CDN link in your template for instant access to professional styling components and utilities.

<!-- templates/base.html with Bootstrap -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Django App</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center text-primary">Django with Bootstrap</h1>
        <button class="btn btn-success">Click Me</button>
    </div>
</body>
</html>

Add Styles to Django Project