10.3 More advanced selectors - Video Tutorials & Practice Problems

<v Instructor 1>We've made a lot of progress</v> on the hero section here, but there's one little detail that we'd like to add, which is some visual indicator that there's more content down on the page. So most people know to scroll, but it's nice to have just a little hint that you should scroll down and reveal the content that's down on the page. So we just want some little hint that is something that the users should do. And to do this, we're gonna use some more advanced selectors. <v Lee>Yeah, this gives us a very good opportunity</v> to talk about a really, really cool bit of HTML and CSS that is not something that you would expect is there. We actually mentioned this though. We teed it up a little bit in section four, when we were talking about clearing floats and we used- <v Instructor 1>Is chapter four, you mean?</v> <v Lee>Or chapter four.</v> <v Instructor 1>Yeah.</v> <v Lee>And we used the after pseudo element.</v> <v Instructor 1>Yeah.</v> <v Lee>So we're gonna dive right into using</v> the pseudo elements as actual functional bits of HTML on this that you can actually see, instead of hidden and just clearing a float. <v Instructor 1>Okay, and we've got a diagram for this.</v> <v Lee>Right, so we mentioned before</v> that the pseudo elements are used in bullet lists. Like that's one thing that commonly see on websites. And that bullet itself is actually a before pseudo element. And we used an after pseudo element that was hidden to do the float clearing. But the idea here is that every element that's on the page has this before and after kind of fake pretend element that's inside of it and they work like inline elements. So they're functionally the equivalent of having a span that is at the beginning of a line and the end of a line. <v Instructor 1>All right.</v> <v Lee>And the cool thing about that</v> is because it's functionally like a span, that means we can do all sorts of crazy stuff with it, the same way that you would do with any span. <v Instructor 1>Okay.</v> <v Lee>The only thing is,</v> is that you can't put HTML into it. That's the one caveat to it, but there's a lot that we can do with just having an element on the page to target. <v Instructor 1>All right,</v> let's take a look at a live example. <v Lee>Yeah, it really helps to see</v> a clear example of how this works. So our H1 we that we have- <v Instructor 1>(crosstalk) ...content here.</v> Yeah. <v Lee>Yeah.</v> That H1, there's no other content on it. It's just that the text that says code dangerously. But if we target the H1 before and after we can add in styles that'll make these visible, <v Instructor 1>We're gonna delete this anyway.</v> But I think logically, it probably belongs right after the H1 here. <v Lee>Thank you for your organizational skills.</v> <v Instructor 1>Yes.</v> <v Lee>So this is the before pseudo element</v> in the H1 and we'll make it blue. And because it's a before we'll make it a B. <v Instructor 1>Right, so B for before,</v> and then let's do the same thing with after except make it an A. <v Lee>And we can make it red</v> just to make it a little clearer. <v Instructor 1>Great, so let's take a look at that. Aha.</v> Right, so we can compare this to the diagram. Right, so what we've got here is the before there's a B and after there's an A right? <v Lee>Yep, and the cool thing is that, you know,</v> that's not in the HTML, that's purely in the CSS, which means that we can control it purely in the CSS. <v Instructor 1>Okay, so how do we apply this to</v> make a little visual indicator? <v Lee>Well, there's a couple ways.</v> If you go back and look at the CSS, you'll see that the B and the A were added using this property called content. And that allows you to insert text into either the before or after element. So what we can do is we can pick a text element that kind of looks like an arrow, in this case we used Unicode, which is- <v Instructor 1>Yeah, we'll look at that in a second.</v> Yeah, so Unicode is like just an extended character set. <v Lee>Yeah, it's like the alphabet,</v> but with a whole bunch of symbols. <v Instructor 1>I'm just gonna get rid of those.</v> And now we're gonna say, rather than in the after pseudo element of the h1, we're gonna put it on the full hero. <v Lee>Right, 'cause we want it to appear</v> at the bottom of the full hero, of every full hero. <v Instructor 1>And we want full hero after.</v> <v Lee>Mm-hmm.</v> <v Instructor 1>And we can put... I'm just gonna do this.</v> I'm gonna put an A just to see where it goes. <v Lee>There we go.</v> <v Instructor 1>I can't see it, where is it?</v> <v Lee>It's up on the top left.</v> <v Instructor 1>Oh, there it is, look at that.</v> <v Lee>So that's where the natural content ends.</v> So remember we moved the whole wrapper that has code dangerously using top. So this is actually an interesting example of the positioning stuff. So you can tell the amount of space between the A and the top of the screen- <v Instructor 1>Right here.</v> <v Lee>...is the amount of space</v> of code dangerously and the social icons. <v Instructor 1>Interesting.</v> <v Lee>Yeah, so that's</v> the natural position for that, but we've moved it out of that natural position. <v Instructor 1>Right, so we'll wanna move this too.</v> <v Lee>Yeah, we're gonna wanna</v> use position absolute with this, so that this will allow us to put the element exactly where we want it. <v Instructor 1>Okay, so where do we want it?</v> <v Instructor 1>And you misspelled absolute.</v> <v Instructor 1>Yeah, look at that.</v> Absolute, look at that, and you can see the syntax highlighting actually told me that. I knew it looked funny. Like my brain was saying, "Hmm, something doesn't look quite right here." Okay, so position absolute. And then what are the positioning- <v Lee>We're gonna position it</v> 2% of the screen height from the bottom. <v Instructor 1>Okay.</v> So that's two- <v Lee>View height.</v> <v Instructor 1>...viewport height.</v> So I just wanna take a look and see here. Here's our little A, now it's down here. <v Lee>Yep.</v> <v Instructor 1>Okay, and we want to probably move it-</v> <v Lee>Left.</v> <v Instructor 1>...move it left,</v> or move it right. So we wanna say- <v Lee>Yeah, we wanna move... Exactly.</v> <v Instructor 1>The line position is 50%.</v> <v Lee>Yeah. We want it halfway across the screen.</v> So left 50%. <v Instructor 1>Would right 50% also work or not?</v> <v Lee>It would.</v> <v Instructor 1>Okay, 'cause it's halfway.</v> <v Lee>Yeah.</v> <v Instructor 1>Okay.</v> So now it's down here and then there was one more thing. We wanted to translate it, what? Half its size? Why do you want it? <v Lee>Because it's not actually</v> in the center right now. <v Instructor 1>Okay.</v> So if we did like, can you put extra stuff here? <v Lee>Mm-hmm.</v> You can also increase the font size, so- <v Instructor 1>Right.</v> <v Lee>...if you increase the font size</v> to 36 pixels, it'll be a lot more clear too. <v Instructor 1>Okay. Let's do that.</v> <v Lee>And we could change the color to white</v> so that it stands out nicely. <v Instructor 1>Yeah.</v> Yeah. Now we really see that it's not centered. <v Lee>And so we'll use our handy dandy,</v> transform translate trick again. Again, one of those things that this used to be very difficult to do. <v Instructor 1>Yeah.</v> <v Lee>And now it's just one line of CSS.</v> <v Instructor 1>That's amazing. So now it's lined up.</v> <v Lee>It's in the center. Yay.</v> <v Instructor 1>And this, so now let's replace the AAAAAAA</v> with this here. This is from a unicode character table website. And this here is actually an HTML element. We can just copy it and then paste it into here as it inside the quote. Do you need the quotes here? <v Lee>Yes.</v> <v Instructor 1>Okay.</v> So let's take a look at this, now refresh it. And this should look a lot nicer. Aha. <v Lee>Hey, look at that.</v> <v Instructor 1>Look at that.</v> So it's just a little indicator to scroll down. <v Lee>So there's this,</v> we put an HTML character, in this case, a downward pointing angle bracket into the content, but we can actually also use that after pseudo element as a graphical element itself. And we can actually style it to make a downward pointing triangle using a weird little quirk of CSS. <v Instructor 1>Okay. Let's take a look at that.</v> How does that work? <v Lee>So you can,</v> the first thing to do would be to delete the arrow from the content and just leave it two quotes. No, not the whole line. <v Instructor 1>Oh, I see.</v> <v Lee>We just want one empty one. Yeah.</v> <v Instructor 1>Okay. That's strange.</v> <v Lee>If you wanna actually have the</v> before or after be visible, you need to have a content set for it. <v Instructor 1>Hmm.</v> <v Lee>Even if it's empty like this,</v> it just needs something. One of those weird things. <v Instructor 1>Interesting. Yeah.</v> I would not have guessed that. <v Lee>So just as a way to illustrate</v> what we're doing here, what the concept is- <v Instructor 1>Yeah.</v> <v Lee>...we're gonna add a height of zero</v> and a width of zero. <v Instructor 1>Okay. Height of zero and a width of zero.</v> Do we still need this font size? <v Lee>We don't.</v> We can get rid of that since we're not using a font. <v Instructor 1>Okay.</v> <v Lee>And now we're gonna add a border</v> and it's gonna be kind of a complicated border. <v Instructor 1>Okay.</v> <v Lee>So we're gonna add border 10 pixels solid,</v> and then we're gonna do a separate- <v Instructor 1>I'm just dying of curiosity to see. Okay.</v> <v Lee>Just a block.</v> <v Instructor 1>Just a block. All right.</v> <v Lee>And now what we'll add is</v> a separate border color property, and we're gonna add four different colors. <v Instructor 1>Okay.</v> So black, I see we're... This is a good example of how you just sometimes go with whatever feels most natural. So we've got black and then as a hex and we actually just have red, purple, blue. We could do these with the hex values, if we wanted to, <v Lee>Then we'd have to find out</v> what the hex values are. <v Instructor 1>Yeah.</v> I mean, red and blue are pretty easy. <v Lee>Right.</v> <v Instructor 1>But purple is like, I don't know.</v> <v Lee>But for a test,</v> sometimes it's easier just to not even think about it. <v Instructor 1>Right.</v> Oh, look at that. So I guess it's going around. <v Lee>Yeah.</v> So the reason this works is that- <v Instructor 1>Top, right, bottom, left.</v> <v Lee>...when a browser draws a border,</v> it draws the boundary between two sides as a 45 degree angle. For whatever reason, that's just how it was decided it would work. It could have done it a number of different ways. So actually we can increase this. So like increase the border to 20 pixels. <v Instructor 1>Okay.</v> <v Lee>And it's just a lot easier to see.</v> Normally you don't see this because you have like a one pixel border. So it just kind of hides and you never notice it, but it's there. It's just the fundamental way that borders are drawn. <v Instructor 1>Interesting.</v> <v Lee>We can actually increase the</v> height and width and you can see that it's a, just the border around an element. We had to add some height and width before. <v Instructor 1>Let me see right here.</v> <v Lee>Yeah. So there's a little spot in the middle.</v> <v Instructor 1>We can do like this.</v> <v Lee>Yeah. Just make it a hundred.</v> <v Instructor 1>Yeah.</v> <v Lee>In order for this to work,</v> it needs some dimension there. So that's why we had to put zero. I thought this would be a little too confusing to see this weird picture frame. <v Instructor 1>Yeah. That is weird.</v> But now I see that it really is just a border. <v Lee>Yeah.</v> So when we set it back to zero, the dimension of the element goes away, but the border is left and we're left with those 45 degree angles which make triangles. <v Instructor 1>Right.</v> <v Lee>So we can use this-</v> <v Instructor 1>To make a triangle.</v> <v Lee>...to make a triangle.</v> So we can set one of these sides to a color and then the other ones to transparent. <v Instructor 1>Okay. So... Oh, that's interesting.</v> So you can just, so let's make this white. <v Lee>Yeah.</v> <v Instructor 1>And then these will be transparent.</v> <v Lee>Yep.</v> And transparent is the word equivalent of setting something to RGBA0000. And there you go. <v Instructor 1>Oh, look at that.</v> And then we can also get rid of the one because it's the same as the this top right bottom left. But the left and right are the same. We can omit the final one. <v Lee>Mm-hmm.</v> <v Instructor 1>Wow. That's nice.</v> <v Lee>I mean, it's just a little thing,</v> but like we say, in this text, like this sort of thing in the early days of the web, you would actually have to make an image and save it out and serve it from your servers and position it on the page and have it in the HTML. Like it was crazy. Now you can do this with just CSS. If you did want to have like a really complicated one, you could actually change the size of the before or after pseudo element and set an image as a background. That works too. And you don't have to put anything in the HTML. So if you ever wanted to get rid of it or something like that, you wouldn't have to go edit anything. You'd only need to edit the CSS. <v Instructor 1>Got it.</v> All right. That's pretty cool. So now the final thing we're gonna do in this section is just style up the other parts of the page. Right? <v Lee>Right.</v> In a previous section, we put the learn enough story into a home call out and we put our founders information and bio boxes into a section called home section. <v Instructor 1>Where's that?</v> <v Lee>There we go.</v> <v Instructor 1>Just look at that. Yeah. Home section.</v> Yeah. It's a bunch of wrappers. So we're just like wrapping. <v Lee>Right.</v> <v Instructor 1>And we've got a bunch</v> from previous chapters, but now we're really going nuts with wrapping everything in these wrappers. <v Lee>Yeah. And like we mentioned before,</v> this is because a lot of times you just want to be able to target these things as single blocks. You don't want to have to add a class and target individual things. You know, it's logical that all this stuff in this home call out belongs together. So put it in a wrapper. <v Instructor 1>Yeah.</v> <v Lee>So much of web design just is</v> putting stuff in boxes, putting stuff in wrappers. <v Instructor 1>Yeah.</v> <v Lee>And just deciding on a logical set of rappers.</v> So it makes it easier to style down the road. <v Instructor 1>All right.</v> Well, let's take a look at the styles. Do we have the section already? It's homepage. Looks like this is actually a new section, is that right? <v Lee>Yes.</v> <v Instructor 1>And the best place to do this...</v> Where do we wanna put this? <v Lee>Let's put this down</v> because this is specific to just this page. So where these bio styles are- <v Instructor 1>Mm-hmm.</v> Should it be before or after the bio styles? <v Lee>It can be before the bio styles.</v> <v Instructor 1>Okay.</v> Probably go either way on that. But this makes sense. I like the idea that this is like the generic homepage styles, and then these are the specific styles for the bios and- <v Lee>Exactly.</v> <v Instructor 1>...the bios in principle</v> could be on different pages too. <v Lee>That's right.</v> Theoretically, you could just pull them out and put them on an about page for instance. <v Instructor 1>Right, exactly.</v> I was actually just thinking, I was like, "You know, such as an about page." Okay. Let's put in some homepage styles and let's also look again at the different section. So there's a homepage, there's a, like a home section right here. That's the wrapper for the whole thing. So let's style that. <v Lee>And so the idea here is that</v> this would be like our generic home content section when we wanted to take up a good amount of the screen space. <v Instructor 1>Mm-hmm.</v> <v Lee>So we will give it a width</v> that fills most of the screen, but leaves a little bit on the edges so that the content doesn't bump into the sides of the page. <v Instructor 1>Right, so 90% viewport width,</v> I'm just gonna do lots of refreshing here. So where did that come in? I don't see its effect. <v Lee>Did you?</v> <v Instructor 1>That home section 90 VW.</v> <v Lee>Refresh. Refresh.</v> <v Lee>Yeah. I don't see the effect.</v> <v Lee>Yeah. That's odd.</v> <v Instructor 1>Is it because we need a max width somehow?</v> <v Lee>Yeah. Go back.</v> <v Instructor 1>I see in the styles,</v> there's a max width. <v Lee>Right, right, right. Yeah.</v> No, no, no. But it is home section that we styled it, right? <v Instructor 1>Yeah.</v> <v Lee>Like the class name.</v> <v Instructor 1>Mm-hmm. Home section.</v> <v Lee>Weird. I would've thought that</v> that would moved in on the left and right. But I guess we're... <v Instructor 1>Huh.</v> Now there's something weird going on here. Dot home section, seems like should be doing something. <v Lee>Yeah.</v> <v Instructor 1>Well, you know,</v> this is the kind of thing where maybe we can just like give it a background color or just like background red. <v Lee>Yeah.</v> <v Instructor 1>Just to make sure it's applying.</v> This is a trick that I've used sometimes. <v Lee>Oh, I use the same thing.</v> Oh, that's the problem. <v Instructor 1>There we go.</v> We were looking at- <v Lee>We were looking at that. Yeah, yeah, yeah.</v> <v Instructor 1>Yeah.</v> Se the mistakes you can make? <v Instructor 1>Exactly.</v> So we actually are styling this stuff here. All right. So let's do this. This is great. I mean, this is a real trick, right? Just like- <v Lee>Yeah.</v> <v Instructor 1>Let's just make sure it's really applying.</v> Okay. So let's comment. <v Lee>Yeah. This would've been real obvious</v> if we had... Well, if you add the margin auto in there, then you'll really see it move. <v Instructor 1>Okay. So let's do this here.</v> It's not wide enough right now to really be able to tell. It's interesting. Right. So the margin, we have top and bottom margins of six times the root em and then auto on the left and right. So this will center it more or less. That's interesting. So I expected it to be more centered. <v Lee>Well, those bio boxes still have a style</v> where they're set to 25% of the width. <v Instructor 1>Ah, that makes sense.</v> <v Lee>So they're not stretching yet.</v> <v Instructor 1>Got it.</v> Okay. So I'm still not a hundred percent sure about the effect of this. <v Lee>The effect of what?</v> <v Instructor 1>Of the 90 viewport width.</v> <v Lee>Okay. So what's going on here is that</v> if you resize the screen down, it will collapse. <v Instructor 1>Okay.</v> <v Lee>So it'll change size.</v> <v Instructor 1>Oh, I see.</v> <v Lee>See how the content's moving?</v> <v Instructor 1>Yeah, whereas-</v> <v Lee>But then we're putting the max width</v> in there so that it tops out at 980 pixels and then just centers itself. <v Instructor 1>Ah, so if you just keep making it bigger.</v> Got it. That makes sense. So if someone has like a huge screen and they maximize this- <v Lee>Right, you don't want the text to be,</v> you know, one giant line- <v Instructor 1>Right. Okay.</v> <v Lee>...running across the page.</v> <v Instructor 1>Got it.</v> <v Lee>Yeah.</v> <v Instructor 1>That makes sense.</v> Cool. All right. And then we're also gonna style this h2 here, right? The one that says the founders. <v Lee>Mm-hmm.</v> <v Instructor 1>So based on tweaking things,</v> we came up with, I say we, Lee came up with that 1.5 REM. So that's right... Is that right here? <v Lee>Mm-hmm.</v> <v Instructor 1>A little bit of extra space.</v> Some of these things are quite subtle. You wouldn't necessarily notice it right away. And then center text line. <v Lee>Yeah.</v> <v Instructor 1>Like that.</v> All right. Now let's look at the home call out. That's... Where is that? <v Lee>The section up above.</v> Yeah. We'll just throw some quick styles on this just to separate it and- <v Instructor 1>Right.</v> <v Lee>...begin styling.</v> <v Instructor 1>Okay.</v> Now, is there a reason we did the home section before the home call out particularly? <v Lee>No, it was just one thing to start on.</v> <v Instructor 1>Okay.</v> So let's change the background color, the color of the text. So the background color is black. So color of the text is white and give it some padding. And it's top and bottom then left and right. So let's take a look at that. Aha. That's nice. It's nice contrast now with the white down here. So we have the hero then another section and then final section. <v Lee>Mm-hmm.</v> <v Instructor 1>Great.</v> <v Lee>And then we can style the title</v> that's in there. <v Instructor 1>That's the... Right.</v> So this is styling the call out title class so we don't have to muck with the h1. <v Lee>H1, right.</v> And so the h1 has a global style of seven view width, but it's a little bit big for that. So we're gonna drop it down to five and three quarters view width. 5.75. <v Instructor 1>Okay.</v> <v Lee>And we're gonna text line it right.</v> And we're gonna uppercase it. Text transform. <v Instructor 1>Right.</v> <v Lee>And then...</v> <v Instructor 1>Hmm. See.</v> <v Lee>It's not there yet. It's just the beginning.</v> <v Instructor 1>Yeah, no. It's coming together though.</v> Now we need to style the call out copy. Yeah, 'cause right now it's like this is all scrunched in and there's not enough space and we probably wanna like float something at some point maybe. <v Lee>Yes. Except we're not gonna use the float.</v> We're gonna use something much more interesting. <v Instructor 1>All right. Yeah.</v> 'Cause I can see it would be nice to... Well I think I see where you're going with this. (laughs) <v Lee>So let's change the font size for this</v> while we're here and then we'll move on and swing back around to this. <v Instructor 1>Again, we're using REMS just so that</v> it's sort of more self-contained, is that right? So we don't have the possibility of ems like multiplying together. Okay. <v Lee>Looks a little small right now, but it'll change.</v> <v Instructor 1>Yeah. Yeah. It doesn't quite look good yet,</v> but I think we're gonna get there. All right. So what's the next step? <v Lee>The next step is to tackle the bio boxes.</v> <v Instructor 1>Okay. Sure.</v> <v Lee>Down there.</v> First thing we'll do is we'll redo our sizing math on them. <v Instructor 1>Mm-hmm.</v> <v Lee>So we'll make them the full 33% width each</v> and we'll change the padding, get rid of the bottom padding and just change it to 3% inside. <v Instructor 1>Okay.</v> <v Lee>And we'll also change the margin</v> and give them a six REM top margin. <v Instructor 1>Okay.</v> And then no side margins. <v Lee>And no side margins.</v> And then one of the other things we're gonna do here is get rid of that border. <v Instructor 1>Oh, right here, this here.</v> <v Lee>Yeah. So before we had the margins in there,</v> because they had the border and it would look weird at the borders were touching, but now that there are no margins and nice thick padding, we can have them fill up and take up the whole space. <v Instructor 1>All right. That's looking a lot better.</v> <v Lee>Yeah.</v> <v Instructor 1>Still very feline, but-</v> <v Lee>Let's uppercase the h3s.</v> <v Instructor 1>Okay.</v> So that'll be the names. Is that right? <v Lee>Mm-hmm.</v> <v Instructor 1>There we go. Cool.</v> And then the social link we're gonna leave alone and we're gonna change the bio copy. <v Lee>We're gonna drop it down in size just a little bit.</v> <v Instructor 1>Okay.</v> We're gonna get rid of this. Yeah. So 0.75em. It's a little smaller. And then we're gonna get rid of the line height. Is that right? <v Lee>We're gonna get rid of this line height,</v> but what we're gonna do is actually alter the global line height so that all paragraphs will have a 1.5 line height. <v Instructor 1>Okay. Yeah.</v> So now it's a little bit too dense. Okay. Well then let's go up to the top, right at the end of the reset to our global styles. <v Lee>Mm-hmm.</v> <v Instructor 1>And we're going to do the h1.</v> We've already got 7% view width margin top. Are we changing the color of the links? Is that right? <v Lee>Yeah.</v> So right now we have them very bright red. That's the default color. So instead let's use a nice blue color, kind of match the sharky theme. <v Instructor 1>Okay. So again,</v> this is a color picker sort of thing. <v Lee>Mm-hmm.</v> <v Instructor 1>6397B5 is what came out.</v> So we can take a look at the color here. Ah, that's nice. All right. So we've changed the link color. Now let's also change the h2, 'cause we saw this, this here as an h2. <v Lee>Yeah. And it's a little on the small side.</v> <v Instructor 1>Little small.</v> <v Lee>We'll give it a little bit more</v> presence on the page. Increase the font size to 2em and you know, this isn't gonna change with the page width the way that we did with the h1s. <v Instructor 1>Right.</v> So this should get bigger. Aha. <v Lee>That's better.</v> <v Instructor 1>That's nicer. Okay.</v> <v Lee>And then we'll add in the global line height</v> change for the P and we can add this right above the other style there that affects Ps. Specifically Ps that come after an h2. <v Instructor 1>So 1.5.</v> That'll restore us to where we were. There we go. A little nicer. <v Lee>It is.</v> <v Instructor 1>Down here now we have a good line height.</v> Okay. All right. Well, this is definitely coming together. I can see that we wanna work a lot on this though. This, what is it called again? <v Lee>The home call out?</v> <v Instructor 1>The home call out. Yeah.</v> We want the home call out. <v Lee>Yes. The home call out we're gonna use,</v> this is jumping ahead just a little bit, but we're gonna use something there called the Flexbox, which is a newer part of CSS that is incredibly powerful for laying things out. <v Instructor 1>Oh, okay.</v> So it is the sort of thing where we've basically gotten as far as we can, in terms of styling this without using Flexbox. <v Lee>Right. There are other ways that we could do that.</v> I mean, theoretically, you could float those two sections next to each other. But sometimes it's nice to use a new little bit of technology that can do cool stuff. <v Instructor 1>All right.</v> Well, so this is the end of the styling for now. And we will pick this up in the next chapter as well. But we do have one more thing to do, which is to add another page to our site. All right. Lee just noticed that there's one little detail we haven't gotten right. These links here, these social links, should actually be centered based on the text of the book. So we tracked this down, and by we, I mean, Lee. I helped out. (laughs) It's actually a style in... Where is it? It's here. It's the margin. So remember margin auto on the left and the right says this top, right, bottom left. So if we do auto on left and right that arranges to center it like that, and then we can omit the auto here. <v Lee>And when we originally had introduced this,</v> it had a margin zero there because we hadn't talked about margin auto yet. <v Instructor 1>Right.</v> But it looks nicer having it centered like that. Okay. I think that's the last little detail, although you never know. Actually, there is one thing I just noticed. These links are still green. Do we wanna get rid of that? <v Lee>Yes, we should get rid of the bio copy A style.</v> <v Instructor 1>Just eliminate.</v> Where was that? Oh, just this here. <v Lee>Mm-hmm.</v> <v Instructor 1>Okay. So this is good.</v> I mean, this is a good sort of sanity check. Just look over the page and there we go. Now it's got the same color here. The same blue link, which works nicely against either a dark or light background. All right. So let's just take a quick look. Is there anything else kind of scrolled around? That's looking good in there. Looks like that's working. We're gonna style this up in the next chapter. And here is our hero section. All right. I think we're good to go. If not, we'll fix it up at some point, but it's always an iterative process when you're doing web design.