CSS Header

[00:00:00]
>> Okay, so now we've learned some of the skills we're gonna use to create the header of our website. So just to remind you, this is what our website looks like at the moment. It's not looking too bad it's getting there. Okay, let's jump into coding the header portion of our website.

[00:00:14]
So on the left of our design, we've got our conference name, and on the right we've got our navigation and shopping cart icon. This is a great use case for Flexbox. So, let's go ahead and do that. So, to use Flexbox, remember we set the display property to flex.

[00:00:31]
So, let's go ahead and do that. If we look in our index html file here, let's look at our header code. So we've got a header inside, we've got our link. And then we've got a div that contains all of the right side portion of the navigation. So we wanna make this a flex container.

[00:00:50]
Let's go in here. I'm gonna go ahead and do this in the base file, because we've got our header on both pages, remember. So, let's go ahead and do this in the base file. I'm gonna select the header element and give it a display: flex. When I do that, now you can see if we inspect using Chrome Inspector here, yeah.

[00:01:18]
Now our header is a flex container, so you can see CSS Day, and the div containing the right side. We wanna align our items to the center. And you can see now they're vertically aligned in the center here where before they were floating up at the top. And now, we want our conference name on the left, our navigation on the right.

[00:01:47]
So we're gonna justify our content with space between. Okay, so now we can see in our flex container, our items are spaced away from each other. There's space between them and they're also centered vertically. Now you'll notice that the shopping cart icon and the navigation are displayed on top of each other here.

[00:02:12]
That's because the nav item is a block element, so it takes up an entire line and it's forcing the shopping cart or other elements around it to move on to a new line. So in order to fix that, I'm gonna select the nav element here. And I'm gonna change this display property to inline-block.

[00:02:33]
So when I do that, now we can see that the nav and the icon are sitting next to each other, right? So what this is saying is we still want the navigation to maintain some block properties, like being able to set margin and those things. But we want it to sit in line, we don't want other elements to break onto a new line around it.

[00:02:53]
So now that these two items, the nav, and the shopping cart they sit on the same line, we also want our nav items to sit on the same line. So you can see here that three nav items in the shopping cart all sit in line with each other.

[00:03:05]
So there's a little bit of styling to do here. So first, let's remove the bullet points from the nav items because we don't want them to have those bullet points. So I will do this using the direct child combinator or the direct descendant. So we're saying, any unordered list immediately inside of a nav, we want the list-style to be none, we don't want it to have any bullet points, okay?

[00:03:31]
So that's going to remove those dots here. We also, let's use Flexbox for this as well, right? It's a one-dimensional layout, we're laying these things out along a horizontal axis. So let's set this as a flex container as well. Now the default layout for flex is row. So now we can see they're all sitting in a row with one another.

[00:03:59]
If we go back to our design, I think it was in here. If we look at our red line designs here we can see 36 pixels of space in between these items. So let's go ahead and do that. We use the same selectors here. So nav with a direct child of unordered list and select all of the list items in there.

[00:04:23]
We're gonna give it a margin-right of 36 pixels. So, now we can see here each list item has a right margin of 36 pixels. You can see that here and the inspector shows up here. There are a couple different ways. So, margin is a shorthand property. So, we could write margin, right?

[00:04:44]
Maybe in this case it is the best way to write that. We can also use the shorthand for margin. Ignore my spacing. So margin could be defined as top, right, bottom, and left. So would be 0 pixels margin on top. We want 36 pixels on the right for each element, 0 on the bottom, and 0 on the left.

[00:05:05]
So again, this is top right bottom left, all right? Margin can also take three values. If there are only three values here, get rid of this last 0. It's gonna be top/bottom, right and left. And again, we could just define one property here. But if there's only one value, let's say there's 36 pixels, one value here.

[00:05:32]
If I have one value here, it's gonna be all 4, it's gonna be top/right/bottom/left. So these are the ways that we can access the shorthand. These are the different values you might see. I'll just declare margin-right. And actually, this works really well in languages that are read from left to right like English.

[00:05:56]
But in languages like Arabic that are read right to left, we don't wanna have a right-margin, we wanna have a left-margin. So, in order to alleviate that, I'm gonna change margin-right to margin-inline-end. So this will take into consideration the direction of a language. Margin-inline-end, we check this out.

[00:06:19]
It defines the inline and margin of an element. So again, it depends on the writing mode, the directionality, and text orientation. So this will be more responsive to these different languages. Okay, lastly, you'll notice the shopping cart icon is not perfectly aligned with our nav items, it's kind of sitting a little further up.

[00:06:37]
So we can address this in a couple of ways. So we could set another display flex on the div that wraps our nav and our shopping cart icon, but that's gonna be three flex containers in just the header, right? So you can do it, but let's discuss using grid for this.

[00:06:55]
Grid's gonna allow us to do this more complex layout, even two-dimensional layouts on my flexbox. So we gonna go to Grid Generator, I just searched for it. This was created by Sarah Drasner, who is another fellow friend and master's instructor. And we gonna use Grid Generator to build a grid for our header.

[00:07:14]
When we look at our design, we only need one row, right? We just have this 1 row here. So instead of 5 rows, we'll just do 1 row, 1 row. And we'll have 3 columns for our 3 items. So we'll have the logo in one column, the nav in another column, and the shopping cart in another column, so 3 columns.

[00:07:35]
What, not 53, can you imagine? So when it comes to these right now they're all set to one fraction. So that's one fraction of whatever available space is there. If we go and look at our design again. Let's see, we want our nav to take up most of the space in this design, right?

[00:08:00]
So we're gonna set the second element here to have 3 fractions of the available space, so it takes up the majority. And then the nav and the shopping cart, we're gonna take up one fraction of whatever space is left over. So, what this looks like, if we set, this as our logo header, this is our navigation, this is our shopping cart icon.

[00:08:25]
Let's go ahead and generate some code and see what that looks like here. Actually, what I'm gonna do is for that shopping cart logo, It's about 34 pixels in width, so I'm actually gonna use that value. So instead of one fraction available space, I'm gonna set it explicitly to 34 pixels here, that's what I'm gonna do.

[00:08:45]
So now we can see we've got that exact column width for the exact width of that icon. The nav is gonna take up the majority of the remaining space, and then the logo will fit right in here. So I'm gonna generate the code here, this is what it looks like.

[00:08:58]
I'll grab everything from that grid-container right here. So back in our header, instead of having a display of flex, let's change this to display of grid. And in fact, I think it was also from the code I just pulled. So yeah, we'll have a duplicate here. So our grid template columns again will be 1 fraction, 3 fractions, and 34 pixels.

[00:09:19]
We'll have 1 grid row, 1 fraction, and we don't care about the gaps because we're not gonna be using them, but that will allow you to put space in between the columns and rows. We still wanna align our items in the center as well, that is something we will carry over.

[00:09:34]
Just so that they're vertically centered. And so when we go back, what does this look like? Okay, it's not terrible, things are like, they're a little shifted, but it's not terrible. So let's inspect and see what that looks like right now. Where's our header? Here we go. You can see we've got 3 cells.

[00:09:50]
I know it's a little hard to see, but if you're following along in your own browser, you can see there are three cells. See the logo's already sitting in cell 1. And it looks like the nav on the shopping cart sitting in the same section here. This is because some of these elements are already assigning themselves to these grid areas without us even having to tell them where to go.

[00:10:09]
What I'm gonna do if we go back into our HTML file here. Again, we've got this wrapping div, right? So that's why we're only seeing 2 of our grid areas being used. Because when we look, here's our grid container, we have 2 elements directly inside of it. So that's why you're getting the logo in one and everything else in the second.

[00:10:29]
So since we're not using Flexbox, I'm gonna remove this div now, right? So now we've got 3 distinct elements, we have the logo, the nav, and the image. And now they're sitting nicely in these 3 grid areas. So before I forget I'm gonna do the same thing and speakers because we've got the same code over here.

[00:10:47]
So remove this wrapping div otherwise I'm gonna forget forgetting wondering why everything is broken. And again, we can use grid template areas to name these cells so that we can actually explicitly declare that hey, I want the logo to be in cell 1 where the logo cell. So, back in here under header element, to find our grid-template curious.

[00:11:13]
So the first one is gonna be for our logo. The second one will be for our nav, and the third one will be for our shopping-cart, there we go. So to see if this actually works, let's try setting the image to a grid area of logo. So, let's see, we want image inside of a header, and we want to set that to the grid-area: logo.

[00:11:41]
Let's see what happens. Well, that looks silly now because our shopping cart is in spot one, but it's working, right? So we've got the shopping cart image. We've said, hey, position yourself into the first cell, which is our logo cell, and it's working. So, that's fantastic. I'm gonna remove that because that was just for show, we don't need that.

[00:12:03]
But what we can do now with the header image is we can explicitly set the grid, let me not delete all of that, right? We can set the grid-area to shopping-cart. Not that we need to it will fill itself in there. So now we're ready to align our navigation items.

[00:12:19]
Right now they're sitting kind of in the middle here. If you haven't worked much with CSS in Chrome in particular, or Firefox or another browser, I always like when I'm trying to figure this stuff out before I'll write it in the file. I'll just write it in my browser and make sure it works for a cell.

[00:12:39]
If we want to assign these to the end of their grid cell, let's say justify self-flex, not flex, end, sorry, look at that. So instead of everything being justified in the center, now we're saying, okay, but let's take this nav. I want it to justify itself to the end of its container.

[00:12:59]
So it backs right up against the end of that grid cell there. So let's go ahead and transition that over to our code now that we know it works, right? So we'll put it under here just to isolate that, there we go. Now we can add some padding to that header element so it doesn't sit directly against the edge right now the shopping-cart.

[00:13:20]
And the logo are sitting right on the edge of our viewport. And if we look at our design, we want 60 pixels of padding here. So, let's go back to our header. And just like margin has a shorthand, padding also has a shorthand. So I could say like padding-left, was it 60 pixels padding-right 60 pixels.

[00:13:38]
But I'm not, I'm just gonna use the shorthand. So top and bottom padding, we don't wanna add any, we just want left and right. So top and bottom will be 0, left and right will be 60 pixels, like that. So now they're sitting a little bit nicer there.

[00:13:55]
The last thing just to finish out our header. We need to set the font size of the logo in the nav items just to make them consistent here. So if we go back to our design, I forgot over here. You can see the logo should be 40 pixels, the nav should be 20 pixels.

[00:14:18]
So, do this here header. So all direct children that are links inside of a header, we'll do a font-size of 40 pixels and a font-weight, a bold, want that to be bold, whoops. Types of fonts, there we go. That CSS Day looks a little bit more like our mark-up there.

[00:14:38]
And the nav items should be a font size of 20 pixels. Whatever that is, there we go. So nav > ul li, and here, we're coming down and we're saying font-size, 20 pixels. Okay, so, that looks pretty close to our design there. So, that's what we were given, this is what we're working with.

[00:15:09]
But you'll notice we've written our code using element selectors and combinators, which is fine, there's nothing wrong with that. But like I'd mentioned, Block Element Modifier is a really nice way to add some semantic markup. So I'm gonna add the following classes to the HTML file here. So header, I will give a class of header.

[00:15:30]
We've got a block here for header link, class ="header_link", we've got one block here for nav. Nav is gonna be its own block. The unordered list will be an element nav_list. And now in VS code there's a cool multi-select I'm gonna do that by highlighting the list item element with my cursor.

[00:15:56]
And I'm gonna press Command+D to highlight the next one that matches and the next one that matches after that. So command+D three times on my Mac and VS code is gonna give me triple cursor here, so I can be a little bit more efficient. So for this, I wanna add an element here of nav_list item like that.

[00:16:22]
Okay, so now that we've got our classes, let's just go replace those in our file. We're gonna replace these so instead of header element it's gonna be header class. So be header_ link. This will be class of nav. We've got nav_list. And nav_list-item. And we don't actually need to assign the shopping-cart to a grid area, it does fit itself in there, so I'm just gonna remove that.

[00:17:04]
So now that we've replaced our type selectors with class selectors, everything is working as expected, which is great. We will need to replace the markup or add some class names to our speakers page as well. But we'll do that when we get to the speakers page.