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

including your static files like your CSS.

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

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

In our case, the setup looks like this.

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

you need to follow a slightly different pattern.

If we wanted to add CSS to our courses app,

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

That directory contains its own directory also called courses.

Static slash courses then contains directories for your CSS,

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

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

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

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

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

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

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

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

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

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

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

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

This is called namespacing.

So let's try it out.

Make sure to reload your workspace,

because the new workspace has some new CSS files.

We added some CSS to our courses app.

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

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

Next, we created a directory within the static directory

with the same name as our app, courses.

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

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

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

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

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

that aren't in the course's app.

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

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

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

We add the static block after the original style sheet

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

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

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

add our app specific CSS to this file.

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

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

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

to the existing style sheet and pasting it here.

We just have to remember to change this path.

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

So we'll say courses/css/courses.css.

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

CSS file.

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

So, load static from static files.

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

Now, we just need to start our server.

So we will change directories into learning site and

then use python manage.py

ruserver on our port to take a look at our site.

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

instead of the maroon color that you see in the header.

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

If we open the CSS file, we see that the CSS that we changed

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

So that's the static tag in a nutshell.

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

start building our own custom template filters.