Home » Django

Implement CSS on an App | Django

In this tutorial, we are going to learn how to implement CSS on an App in Django web application framework?
Submitted by Pankaj Singh, on November 07, 2018

CSS (Cascade Style Sheets) are used to implement design.

Step 1: Create a Sandbox, Activate it, Install Django and Create Sample Project

Creating Sandbox

Activating it

Installing Django

Creating Sample Project [myapp]

Project Structure [myapp]

Step 2: Add a new folder (i.e. static) in root location (i.e. myapp folder[outer])

Step 3: Now go to https://getbootstrap.com/docs/3.3/ and download bootstrap files. I am using bootstrap CSS to style myapp

Step 4: Add bootstrap files to static folder

Step 5: Add site.css (my own css) to static folder

Step 6: Add static folder path to settings.pyof admin app (i.e. myapp[inner])

Step 7: Add a new folder templates for HTML Templates in project folder (i.e. myapp[outer])

Step 8: Add templates location to setting.py in admin app (i.emyapp[inner])

Step 9: Add a master page (base.html) in templates folder

Sections of Head Tag of base.html

Sections of Body Tag of base.html

Step 10: Now Add child pages (i.e. index.html, home.html etc)

Index.html

Home.html

About.html

Contact.html

Gallary.html

Feedback.html

Register.html

Login.html

Step 11: Add a controller file (views.py) to manage views in admin app (i.e. myapp[inner])

Step 12: Add controller actions (functions) to views.py to manage requests.

Step 13: Add new url to urls.py in admin app (i.e. myapp[inner])

Step 14: Run the Server

Step 15: Open Browser and type http://127.0.0.1:8000