Album Styles

[00:00:00]
>> All right, so let us start with the album. [COUGH] Okay, so here's our CSS. We have, or sorry, here's our HTML. We have a section with a class of album. We have an h2 and h1 and our links. So let's style that up now. We can add ourselves another layer, I am just gonna stick it here after the tour at layer, and we'll call this album because that's what it is right?

[00:00:37]
So inside of this, we can say we need to have a border around everything, right? We need to have this border, this big old border here. So what should I put in to get that big old border there? This big old border right here, what am I gonna do?

[00:01:02]
>> Border two pixels solid I think that's-.
>> What's my selector.
>> I'm sorry.
>> That album.
>> That album, yep. And then what you were saying?
>> So border two pixels solid and I guess.
>> Cyan. Yeah, okay. Cool, there it is. Very attractive. Okay, what's next?

[00:01:33]
Notice that that thing is stretching all the way across the page. Look at that, do we want that? No, how can we fix that problem?
>> Max with.
>> With we can do a max with 500 pixels. Okay great now it doesn't go all the way across the pitch.

[00:01:58]
All right but I do want to have it centered, so how do I get it centered?
>> Margin.
>> Margin, margin what?
>> 0 auto.
>> 0 auto, Margin 0 auto will center it and that's nice, but I'd actually like some space on the top and the bottom, okay?

[00:02:21]
So we can make that happen. We could say something like 2rem, auto, like that, and that'll give us a little bit of space on top and a little bit of space on the bottom. Nice. Okay, what should be my next thing here? Are you happy with the text all smashed up against the edges of the box?

[00:02:45]
No, what should I do? Yeah, yeah says Andrew. What should I do to fix it?
>> Padding.
>> We should definitely add some padding, 1rem. Sure, one other thing. What is that? Here.
>> Text align center
>> Text align center. Yeah, textalign center right there Great. We're getting closer.

[00:03:20]
All right, so the next thing, let's style the words new album. That would be, the selector would be what?
>> .albumh2.
>> .albumh2, excellent. And so how are we gonna style that?
>> Get rid of the margin?
>> Get rid of the margin. So remember, all your headings have margin on them by default.

[00:03:47]
That's where those big spaces are coming from. You could find you could figure that out if you put a border on it, you'd see the space in between the two borders and you say that's margin. So always there's margin on the headers, we'll turn that off. What else do I need to do?

[00:04:05]
>> Change the font family.
>> Change the font family. So our font family will be what?
>> Bar cursive.
>> Bar cursive. Great, okay. What else?
>> Maybe I can figure.
>> Yeah, if I zoom this out to 100% I don't know if I can make it the right size.

[00:04:32]
You'll just have to take my word for it. It should be much smaller font size can be VAR H6. Sweet. We're almost there, aren't we? Now all we have to do is style. It was all a dream. What's my selector for that?
>> Album h1
>> Album h1?

[00:05:03]
Great suggestions for making It Was All A Dream. Look like this.
>> Color.
>> We're adding a color bar line okay
>> Text transform.
>> Text transform.
>> Uppercase. Uppercase. Why would we ever use text transform? We can just type it in HTML and uppercase. Why would we do this?

[00:05:37]
>> If you're getting data dynamically inserted.
>> Yeah, if we get dynamic data inserted in the page. If we have a client, who's ever had a clueless client before?
>> [LAUGH].
>> Yeah, right, wait, people forget. So yeah, you should absolutely do things like this. If it really is important that it's uppercase, don't leave it to people to type it in uppercase.

[00:06:00]
What else?
>> Maybe font weight.
>> Font weight? 300, They may or may not change it might be or that already, okay? And anything else?
>> Font size,
>> Font size. You'll have to take my word for it. This is a var(--h4) That puts it all on one line like that.

[00:06:28]
There's one other thing here.
>> Less margin top.
>> Yeah, do you see how we have a space there? Between new album and It Was All a Dream. Where is that coming from?
>> The h1.
>> The h1, we turned it off for the h2 but the h1 still has its margin on doesn't it?

[00:06:51]
So we'll set that to margin I actually have it set to 1rem0 so to give us a little bit of space. If you set it to 0 the text would touch each other because we turned it off for the h2 but we do actually need a little bit of space there.

[00:07:08]
So we'll say 1rem0. Hey, look at that. Doesn't that look awesome? Cool.