Quick links
Latest articles
Internship
Members
New...
Algorithms
Discrete Mathematics
Big data
Languages
C
C++
C++ STL
Java
Data Structure
C#.Net
Android
Kotlin
SQL
Web
PHP
Python
JavaScript
CSS
Ajax
Node.js
Web prog.
Programs
C
C++
DS
Java
C#
Python
Aptitude
C
C++
Java
DBMS
Interview
C
Embedded C
Java
SEO
HR
CS Subjects
CS Basics
O.S.
Networks
DBMS
Embedded Systems
Cloud Computing
Machine learning
CS Organizations
Linux
DOS
More...
Articles
Puzzles
News/Updates

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

Django | Implement CSS on an app 1

Activating it

Django | Implement CSS on an app 2

Installing Django

Django | Implement CSS on an app 3

Creating Sample Project [myapp]

Django | Implement CSS on an app 4

Project Structure [myapp]

Django | Implement CSS on an app 5

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

Django | Implement CSS on an app 6

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

Django | Implement CSS on an app 7


Step 4: Add bootstrap files to static folder

Django | Implement CSS on an app 8

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

Django | Implement CSS on an app 9
Django | Implement CSS on an app 10

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

Django | Implement CSS on an app 11
Django | Implement CSS on an app 12

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

Django | Implement CSS on an app 13


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

Django | Implement CSS on an app 14
Django | Implement CSS on an app 15

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

Django | Implement CSS on an app 16

Sections of Head Tag of base.html

Django | Implement CSS on an app 17

Sections of Body Tag of base.html

Django | Implement CSS on an app 18
Django | Implement CSS on an app 19

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

Django | Implement CSS on an app 20

Index.html

Django | Implement CSS on an app 21

Home.html

Django | Implement CSS on an app 22

About.html

Django | Implement CSS on an app 23

Contact.html

Django | Implement CSS on an app 24

Gallary.html

Django | Implement CSS on an app 25

Feedback.html

Django | Implement CSS on an app 26

Register.html

Django | Implement CSS on an app 27

Login.html

Django | Implement CSS on an app 28

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

Django | Implement CSS on an app 29


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

Django | Implement CSS on an app 30

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

Django | Implement CSS on an app 31
Django | Implement CSS on an app 32

Step 14: Run the Server

Django | Implement CSS on an app 33
Django | Implement CSS on an app 34

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

Django | Implement CSS on an app 35






Quick links:
C FAQ(s) C Advance programs C/C++ Tips & Tricks Puzzles JavaScript CSS Python Linux Commands PHP Android Articles More...

Featured post:
Introduction to Linux (Its modes, Safety, Most popular Applications)
Linux Best Distribution Software (Distros) of 2018

Was this page helpful? Please share with your friends...

Are you a blogger? Join our Blogging forum.

Comments and Discussions



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates



© https://www.includehelp.com (2015-2018), Some rights reserved.