8.8 Fun with borders - Video Tutorials & Practice Problems

<v Michael>All right, now that we've taken a closer look</v> at both margins and padding, let's take a look at the third of those three properties that we opened up with and, uh, take a look at borders. So we're gonna have some fun with borders. Really, are we really gonna have fun with borders Lee? <v Lee>We could be. You never know.</v> People have strange ideas of fun. <v Michael>Okay. So, borders, we've got a border already.</v> Let's take a look at the search here. So we have a border around these bio boxes. <v Lee>Yep.</v> <v Michael>Here.</v> <v Lee>And we did a little bit of, not a lie,</v> maybe a misdirection, when earlier we said that margin and padding were like border, 'cause they're compound style declarations. The border is actually a compound compound one. Which is kind of interesting. So we'll, we'll take a look at that. <v Michael>Yeah, do we wanna actually write it all out?</v> <v Lee>Yeah.</v> So let's expand what border one pixel solid black actually ends up being. <v Michael>Okay, so there's a a border width</v> and it's looking at the text so it's border width. And that's gonna be one pixel. Right. <v Michael>Right. And then-</v> <v Lee>But then again, that one pixel is.</v> <v Michael>Right.</v> Well, yeah, we'll do it one step at a time. <v Lee>Okay.</v> <v Michael>Cause it's basically one pixel</v> Then the border style is solid. <v Lee>Yeah.</v> <v Michael>And border color</v> it's black. And so this here is just a shorthand for these three. <v Lee>Right.</v> <v Michael>To make sure it's the same.</v> Yeah, looks good. But then you're saying that this is also a shorthand. <v Lee>Right.</v> So just like margin and padding for each one of these three that it applies to top, right, bottom and left. <v Michael>Right, look at that.</v> <v Lee>So if you really wanted to</v> you could style them individually. <v Michael>Right, so I can do this,</v> but if I wanted to say, you know, just go nuts, it's the top and do right. And do like 10 pixels. (Michael laughs) <v Lee>There we go.</v> <v Michael>Okay. That's great.</v> Yeah, so it really is the same format though. It seems like this, this sort of top, right, bottom, left is an odd way of thinking about it. But there are so many cases that shows up that you pretty much have it memorized <v Lee>Exactly.</v> <v Michael>In no time, you know.</v> <v Lee>And then the border style is actually interesting</v> because it doesn't use numbers. It uses some arbitrary values. So there's solid, which is just a solid line. <v Michael>Right.</v> <v Lee>There's hidden, which is hidden.</v> There's dotted, dashed, different things like this that you can look in the text and see, but kind of change the appearance of the border. <v Michael>Oh yeah, look at that and so yeah</v> we've got dotted at the bottom. Actually, let's-let's do let's make this dashed 'cause it's nice. <v Lee>Actually make the-make the dotted bigger too.</v> Oh, there you go. That works too. <v Michael>Yeah, that'll that'll work.</v> Yeah, so- (Instructors laughs) You know what, this is fun. This is fun with borders and then the border of colors. It's probably just all the different colors that we can do like, uh, green. We can do probably. <v Lee>let's yeah, throw in a hex FF0000.</v> <v Michael>Do-I have no idea what this is?</v> So, I'm just uh- (Michael laughs) <v Lee>There we go.</v> <v Michael>I'm gonna be surprised.</v> Look at that. Yeah, so you can do all kinds of crazy stuff with these but it seems like the, like just the standard one here is by far the most common, is that right? <v Lee>Mmhm. That is correct.</v> Most people want a border to just be the same all the way around. <v Michael>You you you sure you sure</v> you don't want-wanna rethink our design and go with this? <v Lee>I mean, we could.</v> <v Michael>It's pretty cool.</v> I mean, there is one problem. I think the bottom width should be longer. (Lee laughs) There we go. Oh yeah. That's what I'm talking about. (instructors laugh) Okay, so-so this is really cool that we can basically condense these three things into this one useful rule here. <v Lee>Right.</v> <v Michael>But it seems like it's probably seems more</v> common just to maybe change one of these borders. <v Lee>Maybe, yeah, if you wanted to.</v> <v Michael>But it seems like you don't really do that</v> very often anyway. <v Lee>No.</v> <v Michael>It's usually just a border around something</v> but we do have an example of how to use cascading in order to change <v Lee>Right. So-</v> <v Michael>just one thing.</v> <v Lee>The idea here is that instead of writing out</v> all three of the sub styles that go into border,- <v Michael>Right.</v> <v Lee>you can just set border to</v> one pixel solid and black like we have. <v Michael>Right.</v> <v Lee>And then you can do the one style</v> that you want to have a difference below. <v Michael>Yeah.</v> <v Lee>And then this will apply that.</v> <v Michael>Right. So this is black, black, red</v> and then it fills this in, right? <v Lee>Exactly.</v> <v Michael>So we can just get rid of that.</v> Yeah, and so it's red down here. Bottoms here. <v Lee>So a lot of times, you know, wanna do this</v> for a different color or a different width, like making a the top or bottom zero or something like that or the right hand side zero. So you just set the whole border and then you just change the one. <v Michael>Okay, this-this, we could also do it like this.</v> Let me just make sure I understand. So, we could do this. Border-bottom: 1 pixel solid red. <v Lee>Mmhm.</v> <v Michael>Is that equivalent?</v> <v Lee>Yep.</v> <v Michael>Ah, great.</v> <v Lee>Lots of different ways to do the exact same thing.</v> <v Michael>Yeah. Cool.</v> <v Lee>So let's just set that back to being</v> just the one pixel solid black. <v Michael>Okay.</v> <v Lee>And then let's talk about border radius.</v> <v Michael>Ah, Border radius.</v> What-what is that? I don't know too much about that. <v Lee>So border radius allows you</v> to make rounded corners on boxes. You know, again, a webpage is a whole series of boxes and at some point someone was like, you know, sharp corners kind of boring. <v Lee>Let's have some rounded corners.</v> <v Michael>Yeah, so we're gonna style these three here.</v> Aren't we? <v Lee>Right. So border radius allows you to pull in</v> the corner and round it. So if you make it something small, like 10 pixels. <v Michael>Right.</v> <v Lee>You get-</v> <v Michael>Ah, yes.</v> And now they're kind of rounded. <v Lee>kind of looks like an app icon on a mobile phone.</v> <v Michael>Yeah.</v> '- [Lee] But then if you go big with that and change it to something like 999 or just 99 since in this case, the uh- <v Michael>Yeah.</v> <v Lee>they're just 36 pixels wide.</v> <v Michael>Right.</v> <v Lee>This will make it into a full circle.</v> <v Michael>Oh, look at that.</v> So is it because 99 is so much bigger than <v Lee>Yep.</v> <v Michael>36?</v> So it would, would like- would this also work? <v Lee>That's correct.</v> <v Michael>Look at that.</v> Okay, so what's the kind of the threshold? <v Lee>Well, it would be 36.</v> <v Michael>Okay, so we could do this,</v> but if we went down to say 25. <v Lee>See that flattened it.</v> Oh no, I'm sorry. It would be half of 36. So, it would be 18. <v Michael>Okay. So 18.</v> Ah, good. So if we did like 15. <v Lee>There, now a little flattened up.</v> <v Michael>Yeah, so- got it.</v> No, that makes sense. Because it's, you know, its 'cause its- the 36 is the diameter so we have to have it to get the radius. <v Lee>Okay,</v> <v Michael>It's the theme of my life actually.</v> For any of you out there, who've read the Town Manifesto, it's actually extremely related to what we just talked about. (Michael laughs) Um, okay, so let's just go with 99. So this is a convention then just to pick a number that's obviously big enough to make it round. <v Lee>Exactly.</v> Something that you just won't have to worry about. <v Michael>Yeah, I actually didn't get that.</v> Just on the edit, I didn't note like I saw that it was big but I didn't realize what we were doing is just saying alright. To any other designers looking at this, this is obviously big enough to make it a circle. <v Lee>Right.</v> And it's also big enough so that if you want to change the size of this in the future you don't have to worry about whether or not your border radius is gonna look weird. <v Michael>Right, so we could do something like,</v> uh, 50 here. <v Lee>Yep.</v> <v Michael>Yeah. Got it.</v> Okay. But it's looking kind of weird, right? We've got the links, kind of at the top, right? <v Lee>Yeah, they don't look great.</v> So, let's add a little bit of spacing between them so that they're not all jammed up against each other. <v Michael>Okay.</v> <v Lee>Uh, so let's go the social list and on the ally</v> this is the nice thing about using an unordered list for this kind of linking is that each one of these links is held in place by one of these list items. <v Michael>Mmhm.</v> <v Lee>And so if we want to add a little bit of margin</v> or a little bit of padding or anything like that we can do that on the ally. And then that leaves the links alone so that our styles aren't being copied on every single social link because we wouldn't want that. So yeah. Let's just add in half an M on left and right. <v Michael>Right, so this is top, right.</v> And then the bottom is zero and the left is half an M. <v Lee>Yep.</v> <v Michael>Good. All right.</v> <v Lee>So now that gives us a little bit</v> of breathing room between them. <v Michael>Right. See here-</v> but let's also change the links to something a little bit different. <v Michael>So we've got-</v> <v Lee>We'll change it.</v> <v Michael>Your example.com.</v> Yeah. I'm sorry. You were saying. <v Lee>Oh, we'll change it to</v> let's pretend that these are gonna eventually be links to Facebook, Twitter and GitHub. <v Michael>Okay. Let's do FB. We'll actually use icons</v> for these later on, right? <v Lee>Yep.</v> <v Michael>But for now we'll just do Facebook</v> Twitter and GitHub, by the way, in case anyone's curious. I, I like to mention this when it comes up we're using example.com here. This actually is part of the like official structure of the web, like example.com is reserved for this use which I've always thought was amazing. Like I discover this by going to example.com. So when people- <v Lee>It is kind of amazing.</v> <v Michael>they'll say things like, you know ,</v> my domain.com like no don't say my domain.com say example.com. Like there exists a domain specifically for this purpose (Lee laughs) which is pretty cool. So this, this usage is, is exactly in line with the design of the web. So let's take a look at this though and refresh. So there were FB, so Facebook, Twitter, GitHub but they're still kind of at the top. <v Lee>Yeah. So what we're gonna do is we're gonna get</v> a little bit designy with, with these right now. <v Michael>Okay.</v> <v Lee>And one of the first things that we're gonna do</v> is we're gonna set these to be box sizing border box so that we can add padding and not affect the size of the link. <v Michael>Okay. Yeah.</v> There, there's a lot of new rules here and not all of them are familiar, so it's under so-social link here. So we're gonna add box sizing, border boxing. What does that do again? You just said it, but... <v Lee>It- it makes it so that padding and borders</v> are contained within the width of the element. <v Michael>Right, inside.</v> Yeah. We, we, when we talked about these boxes- <v Lee>Exactly.</v> <v Michael>In the context of, uh, the,</v> uh, bio box, like the, the padding and the border. <v Lee>Yeah. So let's-</v> <v Michael>That's why we had to subtract</v> twice this to get 23%, right? <v Lee>Right. Let's also add some top padding.</v> <v Michael>Okay. So it's gonna be here.</v> <v Lee>Yep. Padding top</v> and we'll add in 0.85 M. <v Michael>Right and that kind of number is</v> is the sort of thing where you tried several values and then this was the one that was- <v Lee>Exactly. We can put whatever</v> number we want in there. <v Michael>Right.</v> <v Lee>Let's also change the color to white.</v> <v Michael>Okay, let's- right now.</v> <v Lee>Using the hex and we're gonna change-</v> <v Michael>Yeah.</v> <v Lee>About the font right now.</v> So we're gonna change the font family. <v Michael>Okay.</v> <v Lee>The font size, the font weight.</v> We're gonna align the font in the center. <v Michael>Okay.</v> <v Lee>And we're gonna remove that little underline that's</v> on the links. So you'll see Michael typing this in except he typed Fong. (Michael laughs) <v Michael>The Fong family.</v> Maybe they're watching out there and they're saying, yay, someone finally mentioned us in- in the CSS and layout screen castor. <v Lee>So font family is a CSS property that lets you</v> change the font. And there are different fonts that are installed on computers. And so from left to right you're putting these in order of preference. So not every computer is gonna have helvetica installed but all apple computers do. So if a computer doesn't helvetica , it'll use aerial. And if it doesn't have that it uses this generic HTML name for a sans-serif font. It just picks whatever the computer has. <v Michael>All right.</v> Let's take a look at- so it's gonna change this in here. So right. If we, if we zoom in these little things here on the- these are serifs right? <v Lee>Right, on the font.</v> Those little things that stick off the side of the letters. So, so those are gonna go away. It's gonna be a lot blockier <v Michael>yeah, there we go.</v> <v Lee>There we go.</v> <v Michael>Okay.</v> <v Lee>We're also gonna set the font size</v> here to be one REM which is the root M and this will make it so that no matter where we put the social links the size of them will be tied to the root font size. So the, in this case it's 16 pixels. <v Michael>So if we used ends there,</v> there would be a danger of this multiplicative property creating a weird size, right? <v Lee>Exactly.</v> So we're kind of inserting a safe point here and we're gonna make it bold with, <v Both>with the style called font weight,</v> <v Michael>Right.</v> <v Lee>Okay. We're gonna center it with text line center.</v> <v Michael>Yeah. 'Cause it's kind of at the bottom there.</v> <v Lee>Well, no, this is actually</v> it's not gonna to effect this right here. <v Lee>The text, the text line is left and right.</v> <v Michael>Huh?</v> <v Lee>The text line is the, is the left and right.</v> Centering, right? <v Lee>Right. So it's not gonna affect it in the hero</v> because the hero is actually already centered because of how we moved those links. But if you look at the bottom, the social links- <v Michael>Oh yeah, look at these.</v> <v Lee>Those are also changing.</v> And so what we're doing is we're we're creating global styles so that no matter where on the site- <v Michael>Ah.</v> <v Lee>we insert these, they'll always look the same.</v> <v Michael>Got it.</v> <v Lee>Yeah.</v> <v Michael>Okay, and then-</v> <v Lee>Text decoration, none.</v> So we're gonna get rid of those little underlines. <v Michael>Yeah.</v> So that could sort of the underlying on the link here. There you go. Looks a lot cleaner and now we want to center it vertically, right? <v Lee>Right.</v> So what we're gonna, we're gonna do a couple things here. We're gonna convert the height and the width to be m's <v Michael>Okay.</v> <v Lee>And so this is gonna be based</v> off of the one REM font size. So we're gonna set it to 2.5 M <v Michael>and this one too, right?</v> <v Lee>Mmhm.</v> And there's one other font related style that we wanna make sure is set so that it doesn't get inherited on this. And that's we wanna set the line height to one. <v Michael>Okay.</v> <v Lee>And the line Heights, again</v> spreads out the distance between lines of text. And so by setting it to one right here we're setting it to be just equal to the size of the font. <v Michael>Okay. Let's take a look at this. I-</v> that-that looks good. And there was one more, there was a vertical align right? <v Lee>Well, vertical line actually</v> doesn't change the text. That's in the object. It actually- <v Michael>And what does it do?</v> <v Lee>this controls where an inline element shows</v> on a line of text. And I know that sounds a little complicated. <v Michael>Yeah. It didn't seem to change anything.</v> <v Lee>It didn't change anything for what we have here</v> because it's- <v Michael>Okay.</v> <v Lee>it's not next to anything else.</v> But if we want to take a look at this <v Michael>Yeah.</v> <v Lee>Scroll down to the bio boxes.</v> <v Michael>Yeah.</v> <v Lee>And in the code.</v> <v Michael>Right.</v> <v Lee>And right in front of one of these links</v> we'll add this. <v Michael>Okay.</v> <v Lee>And now when we go back to the page-</v> <v Michael>So this this was on Nick,</v> so we should look for it right here. <v Lee>So you'll see it now change.</v> <v Michael>Oh, I see.</v> I see that it, yeah. It it's vertically aligned. No, I, I think I can guess so if we get rid of this then this text will be at the bottom of that link. Is that right? <v Lee>No. It just depends on what the settings are</v> but you see right here <v Michael>Yeah.</v> <v Lee>how the the baseline is going across.</v> That's where everything's being figured from. So let's change it to top. 'cause middle is the default, actually. <v Michael>Oh, okay.</v> So then is it there just it's there just to, as as a safety net, basically. <v Lee>Exactly. Once again, just trying to make sure</v> that no matter where we drop these in that things are going to be okay. <v Michael>I got, so it's kind of</v> like defensive programming. Like you're putting it in there- <v Lee>A little bit.</v> So, there we go. <v Michael>Got it.</v> While we're taking a look at the line height let's change it in a place that's a little bit more realistic in terms of when you might use it. I mean, this is realistic. I guess it's just this is just to prevent it from getting messed up later on but there is a useful thing to do with line height, right? <v Lee>Right. The copy there is a little bit</v> too crunched together. <v Michael>Yeah.</v> <v Lee>It looks nice to have a little bit of spacing.</v> <v Michael>Right. So let's add in a line height.</v> And so this, this is just a absolute in the sense you don't have to give it units. It's just 1.5 of what? <v Lee>Of whatever it is.</v> So, you can actually give it units. And that actually is not a good idea because then you can get some very weird results. So- <v Michael>Yeah.</v> So this just basically is one and a half times- <v Lee>The font size.</v> <v Michael>The, the font size. Okay.</v> So we, if we really wanted to stretch it out we could do like four. <v Lee>Mmhm.</v> <v Michael>Yeah. That's no good.</v> But 1.5 is, is there some sort of rule about picking it or do you just kind of fiddle around with the line Heights until it looks good? <v Lee>You just fiddle around with the line Heights</v> until it looks good. Generally something around 1.4, 1.5- <v Michael>Okay.</v> <v Lee>is good. It just gives text</v> a little bit of extra breathing room so that your eye can more easily see the words. So you don't get crowding. It helps with scanning through text. <v Michael>Okay.</v> That's great. So it looks like things are kind of coming together. We've got these little social links here and, and here, oh let's get rid of that IM text (Lee laughs) and looks like we've got everything ready to go. So let's, uh, let's make a commit and push it up. So what do we do here? Are we, uh, we like, what do you wanna say styled the margins padding and border? <v Lee>Mmhm. That's a good commit message.</v> <v Michael>So style-</v> Okay and push it up. Yep. So there's a cache probably that is expired. And there we go. Look at that. Cool. And we saw that same little artifact because the hero is sized based on the, uh, view port height, right? <v Lee>Exactly.</v> It's, uh, yeah, right here. It's half the view port height, 50 VH. And so when we added this tab it changed the view port height again. That's pretty cool. All right. So it looks like it's working on our live site and we're ready to move on.