Preview

Start a free Courses trial
to watch this video

CSS in Django

Name: CSS in Django
Uploaded: 2022-05-26T17:56:34Z
Duration: 312 s
Description: Add some app-specific static content to your site. This is CSS or other static files that are only needed by one particular app, not the whole project. Understand how to include app-specific content in your project, and why you might want to do so.

5:12 with Lacey Williams Henschel

Add some app-specific static content to your site. This is CSS or other static files that are only needed by one particular app, not the whole project. Understand how to include app-specific content in your project, and why you might want to do so.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Managing Static Files: The Django documentation goes into more detail about how Django serves static content in different environments. If you'd like more detail than what we've gone into here, I recommend checking out the docs. Always read the docs!

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

You can also use template tags to get at other data in your project, 0:00

including your static files like your CSS. 0:05

In Django, you need to store your static files in a special way. 0:08

It's best to store your project-wide static files in a directory called assets. 0:14

In our case, the setup looks like this. 0:19

To add CSS that's specific to an app however, 0:22

you need to follow a slightly different pattern. 0:26

If we wanted to add CSS to our courses app, 0:29

we'd need to add a directory called static underneath our courses app. 0:33

That directory contains its own directory also called courses. 0:38

Static slash courses then contains directories for your CSS, 0:43

your JavaScript files, and any images you're using in your app. 0:47

This is so the Django can always find the files you're referring to. 0:53

Adding a directory with the same name as your app inside your static folder 0:58

feels a little weird, but it helps you avoid namespace collisions later on. 1:03

For example, if your project had an app called admin, and 1:09

another called main site, and both of those apps had static 1:13

files associated with them, they might have files with the same names. 1:17

Styles.css is a really common way to name a basic CSS file. 1:21

When Django tries to find styles.css in the static folder for 1:28

your admin app, if you have the extra directory with the name of your app, 1:33

then Django goes to the CSS directory in static/admin, 1:38

and that extra admin helps Django know it's in the right place. 1:42

This is called namespacing. 1:47

So let's try it out. 1:49

Make sure to reload your workspace, 1:52

because the new workspace has some new CSS files. 1:54

We added some CSS to our courses app. 1:58

Let's walk through how that's set up before we get started. 2:01

First, we created a new directory in the course's app called static. 2:04

Next, we created a directory within the static directory 2:10

with the same name as our app, courses. 2:13

Finally, we created a directory called CSS inside the course's directory. 2:17

This is where we store the CSS file that is specific to this app. 2:22

Now, we just need to add this new CSS to our templates, but we have a problem,. 2:27

This is app specific CSS, so we should not add it to layout.html. 2:32

We don't want this CSS to be used on other pages in this project 2:38

that aren't in the course's app. 2:43

So, we should add a new block tag to layout.html. 2:45

So we'll add that here, right below the existing style sheet. 2:51

We just open up a new block tag, call it static, and immediately close it. 2:55

We add the static block after the original style sheet 3:01

because we don't want to have to add the project wide CSS to each template. 3:05

The static tag is for app specific CSS in other templates. 3:10

Now, let's open up course list.html in the course's app and 3:15

add our app specific CSS to this file. 3:20

So first, right here above the block title, we will add our block static tag. 3:24

And I like to immediately close it, so I don't have to remember to do that later. 3:32

And we can also save ourselves a little bit of typing by copying the link 3:36

to the existing style sheet and pasting it here. 3:41

We just have to remember to change this path. 3:45

Now here, we're going to be a little more specific about the path to the CSS file. 3:48

So we'll say courses/css/courses.css. 3:55

This is so Django will definitely know where to look to find this particular 4:01

CSS file. 4:05

We also need to add the load tag to the top of this page. 4:06

So, load static from static files. 4:10

This lets Django know that we intend to load some new static content. 4:15

Now, we just need to start our server. 4:19

So we will change directories into learning site and 4:22

then use python manage.py 4:26

ruserver on our port to take a look at our site. 4:30

So here we can see that the titles of the courses are navy blue, 4:39

instead of the maroon color that you see in the header. 4:43

This is because this particular page is using our app-specific CSS. 4:47

If we open the CSS file, we see that the CSS that we changed 4:52

is the color of these headers, which is now navy blue. 4:56

So that's the static tag in a nutshell. 5:01

In the next video, we'll get into some useful built-in filters, and 5:04

start building our own custom template filters. 5:08

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

Customizing Django Templates

CSS in Django

Related Discussions

Related Discussions