9.5 CSS file and reset - Video Tutorials & Practice Problems

<v Speaker>Now that we've moved</v> the index.html content into a layout called default.html, we're gonna start breaking down this monolithic file into its component pieces. We're gonna slice it up and put it into separate files. And we're gonna start with this part here, this style tag and this is... it's an internal style sheet. Right, Lee? <v Lee>Exactly.</v> <v Speaker>And we're gonna turn it</v> into an external style sheet that lives in a separate file, which is the real way that you would do CSS in most applications. <v Lee>Pretty much every application.</v> <v Speaker>Pretty much every application.</v> It's sometimes okay just to get started with this, the way we have in this tutorial, but for a real website, you want it in a separate CSS file. <v Lee>I would say even then you'd probably wanna put it</v> in a separate CSS file just to make things easy. <v ->I know,</v> I'm just saying that-- <v Lee>Yeah, yeah.</v> You can do it but-- <v Speaker>You wanna try something out,</v> you wanna use it in line and then maybe move it up to make sure that you've got it in CSS format and then you've copy it into the file or move it into the file. So anyway, let's get started with this. There's just one little bit of convention which is that Jekyll automatically looks in a directory called CSS for any CSS files. So let's start by making that directory. <v Lee>If we had done Jekyll new</v> this would've been automatically created but-- <v Speaker>Right.</v> <v Lee>Because we're doing this by hand</v> so that you see each step, we actually have to make the directory. <v Speaker>Right.</v> So now we're going to make a file called main.css. These are touch trick. And then we can open it up. We can take a look at the structure here. So CSS, main.css, our layout is default.html. So you may recall when we made the hero image that we ran into some problems with extra space. So there's in particular some margin in padding. Let's comment this out to remind ourselves. So here's what it looks like. And if we save this and refresh, there's this extra space here. So what we did here was eliminate that by setting the margin and padding to zero and this is a mini version of what's known as a CSS reset. So how does that work, Lee? Like what is the idea behind a CSS reset? <v Lee>So the idea is that</v> you want to reset all of the browser defaults for as many HTML elements as possible. <v Speaker>Yeah.</v> <v Lee>To basically be zero</v> before you go in and really start designing a website. <v Speaker>Yeah, kinda gives you a clean slate</v> to work with. <v ->Exactly, yeah.</v> You want things to be fresh and clean and you just don't wanna have to deal with undoing stuff that is a browser default. That's the real thing that you're trying to get around right now. So, you know, getting rid of margin and padding on things that need it, like the HTML and body that helps. There's a bunch of other things that are in this that include removing margin and padding from things like the headers on a page and a whole bunch of other elements where you look at the header on our sample site or the headers, and like, if you look at the h2, it's pushed away from the hero by, it looks like about one M of space. And we didn't set that. So, you know, you may want that, you may not want that. But the point is that when you use a reset, you're setting all that to zero so that you the designer are making the choice-- <v Speaker>Yeah.</v> <v Lee>As opposed to the browser.</v> <v Speaker>Okay.</v> So there's a pretty long example of this. And if this is the kind of thing you kind of find an example that works for you and then you maybe tweak it over over time. But this is not the kind of thing you would type out. <v ->Exactly.</v> <v ->You copy it in.</v> So we have an example in the book. So here it is. This is a standard CSS reset. This is a good example of one if you wanna tweak it for your own uses after getting more familiar with this, you can. But for now, I'm just gonna copy this and paste it in like that. So you can see there's a lot of stuff here but don't worry about the details. It's just the kind of thing that you copy and paste. And it just removes all of these defaults that we talked about. <v Lee>And notice that we don't need an opening</v> or closing style tag when you're working inside the CSS file. <v ->Ah, yeah--</v> <v Lee>The way that we did when it was</v> an internal style sheet. The browser just understands that if you're loading an external style sheet that all the things contained within it are styles. <v Speaker>Right.</v> And we're gonna put that to good use right now because we're going to take all of this stuff here, all of the styles that we have built up and we're gonna cut them out and we're gonna paste them in here. That did a shift command V there to paste in at the same indentation level if you just do a naive paste, you see it's indented. So that's just a little trick that works in sublime text. And there's one little bit here. You can see, we have end reset global styles but then there's this here, which we don't need anymore because we're using a real reset instead of this tiny example of one. <v Lee>Exactly.</v> <v Speaker>Okay, so we've pulled all of this style out.</v> Let's save it and take a look. Right, so now it's completely unstyled. And now what we're gonna do is include main.css into our default template. So we'll get rid of the style tag. And this uses the link tag with rel which is short for relationship, which I did not know until we made this tutorial, equals style sheet and then a hyper text reference to the style sheet itself. And we're gonna use an absolute path 'cause this is what we'll work on the server for all of our sub pages that tells the system to look at the root directory of the project. So slash then the directory css/main.css. This. So this includes everything in main.css. Remember we just saw that we don't need the the style tag here. So it just takes all of this and puts it into our page here. <v Lee>Our much cleaner page now.</v> <v Speaker>Yeah, it's a lot nicer, right?</v> We've gotten rid of all of that CSS and put it in its own file. So let's refresh this and see what it looks like. And there we go. So we see some changes based on the reset, but this is now styled up again. <v Lee>Yeah, it does look a little different.</v> And some of that has to do with the font and spacing choices that were made in the reset. So you can already see, we called out the h2 before and how there was a little bit of space between the hero and the h2 and now that's gone. <v Lee>Yeah, so it's also important to know</v> that this technique here, it has nothing to do with Jekyll per se. Just using this link rel=stylesheet, and then the file inclusion. That's just a feature of CSS. In fact, we can look at this page Like that. Right, so if we use a relative style sheet, it's the absolute style sheet that works with Jekyll but if we do this, I think this will work, yeah. So this doesn't have anything to do with Jekyll particularly. But it's convenient in conjunction with Jekyll. So let's go back to this with our layout and here, close this up. And there we go. Now we just noted that there are a few changes in terms of the font and so on that came along with that reset. So we'd like to undo some of those and-- <v Lee>Or not undo.</v> Let's make a design choice. Let's put it that way. <v Speaker>Okay, we'll make a design choice.</v> So let's set a global style and change the font so that instead of this kind of old school looking serif font. <v Speaker>Right.</v> <v Lee>We'll set the body to have a font family</v> of Helvetica and we're not gonna edit the one that's in the reset which is right here 'cause we want to keep the reset as something that is-- <v ->All right.</v> <v Lee>Kind of atomic where</v> we can drop it into other sites if we want to. So we're gonna have for this site, we'd add this sort of global style again in the global section. <v Speaker>Right, should be here.</v> So we'll do a global style for the body and we'll have a font family of Helvetica, Aerial and Sans. We actually did this before, right? Yeah, it's the same one that we used for the social links down here. In fact, could we remove this one now? Would that work? <v Lee>We could, yes.</v> But I would-- <v Speaker>Oh, it would make</v> it less modular. <v ->Exactly.</v> I would leave it there just so that modularity stays the same. <v Speaker>Yeah, that makes sense.</v> Okay, so we save that. Let's take a look at the effect of that. So these serifs should go-- <v Lee>Exactly and they should turn into Helvetica.</v> And there we go. <v ->There we go.</v> Cool. And there was one other change we wanted to make which was just a little bit of application of this line. <v ->Right.</v> <v Speaker>Do we make or did we make this change?</v> No, we did it. This is the one we're removing. There's one other thing that we wanna fix up. If you look here at these social links, they're a little bit awkward in they're spacing. So Lee, I think you came up with this just through trial and error. Is that right? <v Lee>Exactly.</v> <v Speaker>So where was it?</v> It was the... So that's in bio box. Social link, we actually don't have it right now. Do we now? <v ->Nope.</v> <v Speaker>We're gonna put it in.</v> So let's recall what it looks like here. These are the social links. They have a class social link. So let's style that using .biobox.sociallink. Is this the first time we've used two classes? I think we maybe-- <v Lee>We've shown that</v> but in an example, I believe. But actually adding it to keep... I think this was the first time. <v ->Yeah.</v> Cool, so-- <v Lee>What we're gonna add here is--</v> <v Speaker>We put display block on here.</v> Why is it display block here? <v Lee>Well, what we're gonna do here is</v> change them so that we can add margins to them. <v Speaker>Ah, okay yeah.</v> Because that didn't make any change so, I don't know if you can tell but it will let us put on the margin. <v ->And we're also going to</v> eventually do some other stuff with them that this helps. So this is just a little bit of presetting styling. <v Speaker>Okay, so then just margin number top, right,</v> bottom and then left. But if this one is the same-- <v Lee>Yeah and so the reason that we're setting it</v> to display block here is that if there are other margins, we're gonna have the margin collapsing function that we discussed a few sections ago. So you won't get multiple added margins in, you'll just have one single one. Whereas like if we had put a wrapper around these and used like padding, then if we had other elements that had margin then we would've had an issue where we have too much space. So in this case, we're taking advantage of margin collapsing and there actually is a margin. So our names, the headers that contain our names have a margin bottom on them. And so that's interacting with the margin top on the social links and we're just making it so that if for some reason there wasn't a header, there would be a margin there. Does that make sense? <v Speaker>Yeah.</v> All right, and we just noticed something here that this link here, this word here should actually be TW, the last chapter. There was a change. So let's change that in the bio boxes. So that's... Where is it? Oh, it's this here. So we want this to be TW. It's just lowercase and this here and this and there we go. <v Lee>Much cleaner.</v> <v Speaker>Great, so now we've got a CSS file.</v> It's self-contained here. We've fiddled with the design a little bit and polished it up. And then this main.css file is included into the HTML file like this. And then it's all built by Jekyll and because of the way we set up this absolute path, it works on local host 4,000, like that. If you wanna take a look, it's instructed sometimes to look at the output of the Jekyll server, don't worry too much about the details, but sometimes it'll give you some useful information about what's going on. <v Lee>We're a long way towards</v> building an actual site now. Once the CSS has a reset added to it in its own file, I always kind of feel like things are on the up and up. <v Speaker>Yep, this is great, yeah.</v> So we're now definitely well on our way as we mentioned. So this is a great start and we're gonna start taking this which is still a little raw and enter it into something more polished.