Using Custom CSS

Quick reference

• 00:04 Okay, now I want to start to talk about how to style our page, and
• 00:07 specifically how to use custom CSS, JavaScript, and images.
• 00:11 And in this video, we're going to focus on CSS.
• 00:14 So to use any of those three things, we need something called a static directory.
• 00:19 And this is sort of like a templates file, but it's a templates file for our CSS, or
• 00:24 JavaScript, and our images.
• 00:26 But in order to create it,
• 00:27 it's a little bit trickier than just the basic templates file.
• 00:31 So we want to put this inside of our app, our resume app.
• 00:35 So let's right click and create a new folder.
• 00:38 And then down here, I'm just going to call it static.
• 00:42 And you can see it pops right up, right?
• 00:45 Now, inside of here we want to create another new folder and
• 00:49 I want to call this resume.
• 00:51 And the reason why is, we're going to have lots of static things, CSS,
• 00:56 images, JavaScript.
• 00:57 And we just have one app in our project resume.
• 01:02 So we probably can get away with not creating a second directory right here.
• 01:06 But if you have a project with lots of apps, and they all have their own static
• 01:11 folder, it can throw some conflicts if you name them all just static.
• 01:16 So we designate it differently by inside of static adding another
• 01:20 directory called resume.
• 01:22 And inside here we can create another folder called css.
• 01:26 And this is where we're going to put our all of our CSS files.
• 01:28 So this is the structure, but
• 01:30 now we need to tell our app that this whole thing exists.
• 01:34 And so to do that, we go to our settings.py file right here in our main
• 01:39 directory, and then just scroll down to the very bottom.
• 01:43 And you'll see the STATIC_URL is static.
• 01:46 We need to add a little bit more code,
• 01:49 we need to type STATICFILES_DIRS, so directories.
• 01:54 And then we need square brackets.
• 01:56 And then inside of here we just type in OS.path.join,
• 02:03 and then (BASE_DIR, 'static').
• 02:08 And then at the need of this we put a comma.
• 02:10 So let's go ahead and save this.
• 02:12 Now what we're doing here is we're saying, hey,
• 02:14 in order to find our static directory, first use the base directory of the app.
• 02:19 And where's that coming from?
• 02:20 Well, the top here of our settings.py file,
• 02:23 we have this base directory already defined for us.
• 02:27 And this was by default when Django started.
• 02:29 And this just allows us to find the path of things,
• 02:32 independent of the operating system you're on.
• 02:34 So if you're on Windows, Mac, Linux, a server up in the cloud,
• 02:38 whatever, it doesn't matter.
• 02:39 This allows us to find the path to these files.
• 02:43 Okay, so we go ahead and close this file, we're done there.
• 02:46 Now let's head over to our resume static, resume css.
• 02:53 And let's right-click and create a new file.
• 02:55 And let's just save this as style.css.
• 03:00 And let's just create some very basic css.
• 03:03 So let's say we have an h1 tag, a header 1 tag that makes text big, and
• 03:07 we just want the color of this to be red.
• 03:09 So I'm going to go ahead and save this, this is just very basic CSS.
• 03:13 Now let's head over to our homepage.
• 03:16 And let's take this bit of code right here and wrap it in an h1 tag.
• 03:22 So if we save this and head back over here to our homepage and click Reload,
• 03:27 we see boom, really big This is my homepage Woohoo.
• 03:30 But it's black, we want this to be red text.
• 03:33 So we need to access our static files in order to reference that CSS
• 03:37 stylesheet we just created.
• 03:39 So to do that, we want to head over to our base.html file because this
• 03:44 is going to be inside of our head tag.
• 03:47 Anytime you reference CSS, it's an inside of a head tag.
• 03:51 And the first thing we do at the very top of the file is
• 03:55 we need to create a tag that says load static.
• 03:59 So we're going to load that static directory.
• 04:02 So next we need to just reference that CSS file.
• 04:05 So for here, we just use a basic HTML link tag, this is what you do for
• 04:10 any kind of style sheets on any kind of website.
• 04:13 It's going to be a stylesheet, and
• 04:17 it's going to be of the type of text/css.
• 04:21 And then finally, where is this style sheet located?
• 04:25 href.
• 04:27 So inside of here, we need to create a Django tag,
• 04:32 and we need to call static.
• 04:34 And then tell it what file we want it to reference.
• 04:38 So we want to reference resume, css, style.css.
• 04:42 So to do that we go resume/css/style.css.
• 04:49 Save this.
• 04:50 Now, sometimes you can get away with not restarting your server.
• 04:54 But most of the times when you create new static things like this,
• 04:57 at least the first time after you've added it to the settings.py file,
• 05:01 you need to restart your server.
• 05:02 So let's head back over here and hit Ctrl+C at same time to break out of here.
• 05:07 And then just push up to type in python manage.pyrunserver to run our
• 05:12 server again.
• 05:13 And so now it's running.
• 05:15 So now we can head back over to our homepage and hit Reload.
• 05:17 And hopefully boom, this is red.
• 05:20 Very cool.
• 05:21 And that's how you use custom CSS.
• 05:23 So we can come into our custom CSS file here.
• 05:25 And we can change this to whatever we want it, blue, if you save this.
• 05:30 We don't have to restart the server now because it's already sort of taken effect
• 05:34 of the static directory, it already knows about it.
• 05:37 And boom, now it's blue.
• 05:38 So very cool and pretty easy to use.
• 05:40 And that's all there is to it.
• 05:41 So in the next video we'll look at static image files.

Lesson notes are only available for subscribers.