CSS in Django

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