Transcript from the "Feed-A-Star-Mole CSS" Lesson
[00:00:00]
>> Brian Holt: So let's come back over here and keep going. We'll come back into the the worm later, as well as the, yeah. So now I'm gonna put a link tag in here link source = ./styles.css. And I am going to create a new file in here at college styles.css.
[00:00:29]
So let me get here my notes.
>> Brian Holt: So I think I told you before the first thing I was do with these is box sizing border box. It just makes my life so much easier.
>> Brian Holt: Okay, so let's start with some body styling here.
>> Brian Holt: One of the fun things you might remember from the other game is you have like a little bird mouse the entire time that you're playing, right.
[00:00:58]
So the way that we're gonna do that is to say I'm body. The cursor is gonna be url(./cursor).
>> Brian Holt: Okay.
>> Brian Holt: So now if I save that and refresh.
>> Brian Holt: Did I say this was styles.css? And the other thing is you have to give it a backup of some sort.
[00:01:25]
So put, default. It gets upset if you don't give us some sort of backup.
>> Brian Holt: So what this is saying is like, load this cursor.png and make that you're like mouse when you're on the page. And if not, then use whatever the browser tells you to use. So now if I come over here and click on it, you can see that I have the little bird floating around.
[00:01:56]
>> Brian Holt: Okay, background color. We're gonna give it some sort of background color so that it looks nicer. So we're gonna give it a nice shade of green. Which I have here, c0c68d. So now if you refresh there, you can see that it's got a nice green background for the, looks like grass, that they're coming out of.
[00:02:29]
>> Brian Holt: Let's go ahead and start on the background next. So we're gonna say bg right here. So the background image here is gonna be from one of the assets I gave you. So that's gonna be ./background.png. Now for refresh here you can see it's got like a nice kind of background from the artist, from the designer.
[00:02:53]
>> Speaker 2: What did get the background class to in the HTML?
>> Brian Holt: We come back here, its the first thing inside the body.
>> Speaker 2: Okay.
>> Brian Holt: Okay, one of the things here. If I come and stretch this out a bit, notice that it's repeating the background, which is not necessarily what we want, right?
[00:03:19]
We want it to be, just one background. So the way we're gonna do that is we're gonna say background.repeat: no repeat. So now if we refresh it, we can see that it stops repeating.
>> Brian Holt: Okay.
>> Brian Holt: This game gets a lot easier if we offer it on a fixed width and a fixed height.
[00:03:53]
So, a good way to do that is just to make this background the same size as what the image is, which I already know to be 1920 pixels by 1080. Height 1080 pixels. So now it's fixed width.
>> Brian Holt: And you can see there, it'll make me scroll from side to side.
[00:04:19]
Just so you know, 1920 by 1080 is quite large so you're assuming that your user is going to have a quite large browser to work on. This and this would be horrendous on a phone. But I think for the sake of this game, where we're kind of assuming the persons on desktop.
[00:04:32]
I think it's an okay assumption to make in this particular case.
>> Brian Holt: For the sake of ease.
>> Brian Holt: So.
>> Brian Holt: Now, I think what I wanna do is I want to get all of these moles kind of into a nice little row.
>> Brian Holt: So here, what I'm gonna do is I'm gonna make this background display flex to use flex box.
[00:05:06]
I'm gonna say flex wrap. So what flex-wrap does is, typically flex box assumes that you want to just shove everything in a line. You're basically giving it permissions, like, if you run out of space, go to the next line. So this is already gonna look a little bit better.
[00:05:27]
>> Brian Holt: You can see here now everyone's at least fitting on a playing field, which is good.
>> Brian Holt: Okay, we wanna say justify content. Center, align-items, center to get everything kind of more centralized on the page.
>> Brian Holt: So, you can see there now there, now there's centralized.
>> Brian Holt: Already looking a lot better.
[00:06:02]
>> Brian Holt: So I'm gonna just zoom out a little bit so we can kind of see the whole playing field at once.
>> Brian Holt: Good so far with CSS?
>> Brian Holt: So now if I have this big page, like in someone's life zoomed out like I did, it would be better if this was like a little bit more centralized on the page so we can do that here by using display flex on the body as well.
[00:06:30]
Display flex and then just the same justified content center a line items center.
>> Brian Holt: Okay, and that gets us a little bit more centered on the page.
>> Brian Holt: When I say body have padding : 0 and margin : 0. So that'll get rid of the little tiny space that might be hard for you to see but there is a little bit of space right there.
[00:06:59]
>> Brian Holt: And now its actually pushing all the way to the sides.