Navigation Bar: Styling Lists with CSS

For our navigation bar, we have marked up the links as a list because conceptually, it is a list made up of various list items. There's different ways that we can style this list. Currently, this looks like a bulleted list because that's just the default appearance of a list.

That's not what we're limited to. I know that things stack on top of each other by default, they have the bullets by default, but those are just default appearances. We're not stuck with those.

We have conceptually, correctly labeled these things as a list because they are a group of links. We're listing out the pages that are the main pages for the website. So this is the correct markup, it's just not the correct styling.

We're going to use CSS to style this the way we want it to look using this existing markup. All right. So the first thing I want to do is this list has some bullets and I don't want those.

So I'm going to change the type of styling for this. So I'm going to come up here and make a new rule for the unordered list that we have. And I'm going to say that the list style type is none, that there is no style for this.

So I'm going to save that and hit refresh here. And zoom in again so we can see this a little bigger. So there we go.

The bullets are gone. So that's step one. Now there is still some residual space and we wonder where is that space being created? What's adding it? Is it the list item? Is it the list? Now we could just take wild guesses of what this is, or we could use the developer tools that are built into our browser to have it tell us what's adding that space.

So I think it's something with this list right around here. So I'm going to go to the list item and right click on that, or control click on the Mac if you don't have a right click, and choose to inspect. In this case, I'm going to keep the dev tools over here on the right if they are down at the bottom, which I could do that as well.

But if we want to put them on the right so we can see kind of a little bit more stuff, maybe I'm going to put them over here on the right like so. And adjust this so that I can see some styling here and I can see some code here. Now if I just look at the styles, I'll see the written out styling, but actually in computed this is what I want to see.

So that when I click on various things, I can see here the numbers of things. But then also out here when I hover over things, this is actually one of the fastest ways, is instead of having to click, because down here this is great to see the numbers when you click on something, when you want to see what those values are. But if you're just trying to find where is the space, instead of having to click on everything, just simply hover over the various things.

If I start with the link and hovering over that, notice there's no margin or padding, there's no other colors, it's just blue. Blue is the content. So there's nothing extra beyond the content.

Hovering over the list item, nothing there, just the blue. Hovering over the list itself, oh look at the orange and the green. Okay so those are padding and margin.

Now if I click on it, I can see that I've got some top and bottom margin, so that's the orange parts, and then I've got some left padding. The left padding is what was making room for those bullets. If we wanted to keep the bullets but we just wanted less space on the left, we could adjust the left padding if we wanted to change this.

But I don't actually want any of the spacing, because I don't want a that's vertical, I want it horizontal. So I don't want any of this list margin or padding. So I'm going to set them both to zero.

I'm going to go back to here and say for this list margin, all the margins are just going to be zero, and padding, all of the paddings are going to be zero. Doesn't matter which side, let's just get rid of them all. There's no point in spelling out margin top, margin bottom, that would just be extra writing, when we can simply say just take all the space off of both.

And so now, there we go, we've gotten rid of that space. Now keep in mind that the sections have space, which we want. I want some margin below this, I want some margin below this, so I do want some space around the section as a whole.

I don't want them touching things, so right now we just have the margin bottom that we have set previously. We set for all of our sections that we have some space between our sections. Now it's that the list itself is not adding to what we have, it's just only what we wanted there to be.

So I'm getting closer. Now the next step is that these list items right now, notice the width of those when I look at the blue area as I highlight these, as I just hover over these. Notice that blue area extends the whole width of this page, really the whole width of the container.

So since the nav does not have a width and the body does not have a width, although actually it does have an upper limit here for the other sections, the header and nav, we have not limited the widths of those sections. We've not set any widths on these. And so if you don't set a width on these elements, they fill their container, in this case the body.

So the body fills the window, and therefore the nav fills the window, the list fills the window, the list items fill the window, because block level elements, things that normally stack on top, one of the ways that they do stack on top of each other is their width that they are capable of fills the entire width of the container, leaving no space to the left or right of that for something else to fit.

Even though this text that's in this link does not fill out the entire line, it's still reserving that entire line for this block level element. And so if I do double click on the text and I just start typing in many text, eventually, if we have enough text, it would get to the end of that line, and it would wrap if we eventually get enough, and then it wraps to the next line.

So it's capable of filling up that space. And let me just hit refresh there to get rid of that change. So that's an important thing to understand about these types of elements.

We're going to be comparing what are called block elements to inline elements. And so the idea of a block element is the width fills the container, meaning nothing else can fit next to it. So therefore they must stack on top of each other.

So example of block elements are these kind of major elements like header, nav, main, footer. Those are block elements. Lists and the list items are block elements.

Headings and paragraphs are block elements when we have headings and paragraphs. Images, however, if you have a small image and you have multiple images next to each other, images will go next to each other. They are inline elements, meaning they can fit multiple things on a line.

And why do they fit multiple things on a line? Well, because they don't fill out the entire line. They don't expand to automatically fill their container. If it's a small image, it does not automatically fill its container.

There's enough space to the right of it, and another image could sit there next to it. The same thing, actually, with links. If we were to have multiple links.

So I know right now I only have this one link, but actually if I were to copy and paste this multiple times, notice that I can get multiple links all in a line next to each other. So links are inline elements. I'm going to hit refresh to get rid of that.

All right, now I want these list items, which by default are block elements, which fill the line leaving no room for anything else. I want them to be inline. I want them to be next to each other.

So I'm going to set these list items to be inline. I'm going to come right down here. And so those list items that are inside that list, I want their display type, I want them to display as inline.

So the default is block for this. Now, not every element is block. So different elements have different initial display types.

And so we're changing it. I'm overriding the default and saying, no, I want that to display inline. And so now the width of them changes.

Now the list items do not fill out their container, therefore leaving enough room that other things can fit, assuming there's enough space on the line. Now, if there's not enough space on the line, then of course they're going to wrap. So they're going to fit as many things as they can on a line.

And anything that doesn't fit on that line will wrap to the next line. So think of words as inline elements, right? You can put many words. So each link is kind of like an individual word.

I know, of course you can put multiple things inside of it, but just imagine it conceptually kind of like a word that can wrap to the next line. So whatever ones don't fit, right? It's not that the whole link has to wrap. It could be, you know, one part of the, because there are multiple words in that particular link right there.

So words can wrap, but those list items now are next to each other. Now, before we get too far with this, I have done styles for the list and list items. And the way that I've done these styles is I have said all lists, all list items.

And right now these styles are just for this particular page, but even in this one page, imagine if later I want to create a bulleted list. I've just said, no, all lists and their list items, no bullets, no space around them. The list items are next to each other.

This is really not appropriate to do for all lists. Not even for one page, but let alone later, we're going to learn how we can share the CSS with an entire website. You're not going to want all lists and their list items to always be non-bulleted lists that are in a row.

You're not going to want that. So I need to have a way to restrict this to saying this is appropriate for in the navigation, but it's not appropriate for all lists. And so that's where we get to descendant selectors.

Descendants are when you have a parent and a child relationship, we have a nav and inside the nav, we have a list. And so I only want to have these be for inside of a nav. When you're naming your rule, your CSS rule here, when you put a space, that means that this is a descendant of this parent.

So it could be a parent, a grandparent. The idea is that this is somewhere inside of this nav. So only style lists when they're inside of a nav.

Only style list items when they're inside of a nav. And just to reiterate here, so these list items are inside of a nav. These lists are inside of a nav.

Now only these will be affected. So a regular list would not get this. A regular list item would not get this only when they're in the nav.

So I should be able to save this and this should still work. I know I don't have another list down below here for you to see this, but now it will limit the effect to just being on here. Okay, so that's good.

Good moving forward. Now these links are really close to each other. And while they do function here, I'd like a little more space around them.

Now there's a couple ways we could do that and a few differences between the ways we do it. For example, the list items. I could put some padding inside of those list items.

That's one way I could do it. And let me just show you if I did do that because I want to put space inside of those. If I did put some padding there, let's say I put in a lot just for this demo, 30 pixels.

All right, so there is space now between them. But notice all of that space there that's there, which of course is too much. It doesn't happen vertically, which is a little strange there.

But also notice I still have to hover right over the text here. If I go a little bit farther, notice that does not work. It's right over the text.

I got to aim perfectly at that text because it's the list items here that are getting that extra padding. And also notice how some things like the about us kind of get in there. And actually now it's, I can't actually click on this one here.

I can click on this one, but I can't click on this one. So there, see it's acting weird. Okay.

That's because these are inline elements. And things like padding and margin act differently on inline elements, which is part of what I want to explain here. But I'm going to do it instead of doing padding on the list item, I want to do this on the link actually.

And let me explain why. So actually, let me start with the background color just so we can see this. If I do a background color of black, which is no light, so zero, zero light there.

If I put that on the list item, so here we've got on the list item and let me put a little bit of padding on there too as well. So padding 10 pixels. Okay.

So it's the list item. Now the link is sitting inside of that. So the black is the list item.

And now the link is inside of that. So I can't click anything for the list item. I have to click the link itself.

Now let's say I go and I move that stuff from the list item. And now I put on the link in the nav. So I don't want this to be on all links because other links on the page, I don't want to change those.

So only links in my nav. So in the nav, I've got anchor tags, which are my links. And I want to put these onto those links directly.

So I'm putting a background color for the sake of illustration and putting the padding there. Now, visually at first, this looks the same, but the idea here is that now the link itself is actually bigger, which means that anywhere in that solid black area, I can click anywhere there. I don't have to be quite as close.

So it makes it actually a little bit easier to click that area. We call this the clickable area or the hit state. So you can kind of hit it anywhere in that area or click anywhere in that area.

So it actually makes it a little bit easier to click on that, especially if you're on touch screens. Sometimes if you've ever tried to tap on something that's text only, you have to tap right on it. But if you made that tappable area bigger by increasing that with some padding, it would be a little bit easier to tap on it in case your big fat finger wasn't quite as accurate as you hoped it would be.

So right now I'm just adding the background color so that we can understand what's going on because adding the padding is adding some space because I want these things to be further spaced out. So that's good. I like the padding, but there's some weird things that's happening.

Like, for example, I try to click on featured and see how it's trying to click on contact. And the reason for that is we can see it better when we have the background color, which by the by all means, if we want to add background color and style this and make these kind of look like buttons, we could we could certainly do that. But I just want us to understand what's going on here.

See how contact is like layered over top of this because it's being reflowed down to the next line. And this can happen with anything that flows to the next line. So in this case, notice how while the padding is there's horizontal padding, which is kind shifting things.

Notice that the vertical positioning of this doesn't really change. And even though we're adding top and bottom padding, which you would kind of think intuitively that these things would move down, right, that they wouldn't cover over each other. So this is not acting the way that I think would be kind of intuitive.

It just doesn't seem like the way I would do this. But the way that inline elements except box model stuff. So box model stuff is the width and height of your content, the padding, the border, the margin.

So it's how these things affect sizing of elements. Display block and display inline are more than just things stack and things go next to each other because the widths have to change. It affects how the box model works.

It affects how padding and margin affect things. And so the most obvious thing is, of course, that you see things stack when they're blocks and they go next to each other within line. The thing that's not so intuitive that you don't immediately realize is that it also affects how things work with the box model.

So I don't like the way that inline elements work with the box model because padding does not work the same way on an inline element as it does with a display block element. So with display block, the box model works as I think people would kind of intuitively expect. Widths and heights work properly.

Padding, border, margin, they work as we've talked about in previous videos. But on inline elements, they don't work the same. They work kind of oddly.

And this padding, even though I'm doing vertical padding, is not pushing things down the way I would expect them to. So I'm in a weird situation where I need to have things in line because I need them next to each other, but I don't like the box model that's associated with inline elements. I like the good box model from block, but I want things to be inline.

And therefore, that is why we're not going to use display inline. We're going to use display inline block. So inline block.

When I first heard this, I was like, wait, this does not make any sense. How could you be both inline and block? But that showed my limited understanding that I thought it was just about inline is next to each other and block is stacking. The idea of inline block is saying I want an inline element with the good box model of a block because block has a better box model.

So I want the best of both worlds. And so this will fix the issues here now. And oh, sorry, I'm not doing that on the list item.

I'm doing that on the link. So links are inline by default. So I'm saying display inline block.

So this is the thing that I'm adding padding to. And so this is the thing that I'm changing. And so anytime you're adding padding or margin and you're trying to change widths and heights on things, if they are naturally inline elements, like links are inline elements, like we want inline block, which is better than display inline.

And look at that. Now this is acting much better. They don't have this weird interaction with each other.

I can see that they actually push down the page. And let's just see the difference here. If I take this off, see how they were weird, kind of covering over each other.

And now they're not. And see now how they're affecting the height. Now padding does increase the height.

And it was that weird interaction of padding not changing height. It's that weird box model that inline elements have. And if you're not sure, like, well, how am I supposed to know if something's display inline by default or display block by default? Eventually you do get used to these things as you work with them enough.

You eventually just remember it. But here's a simple test. If you put multiple things into your code, let's say you put multiple links or multiple paragraphs, just simply look at them and see, do they stack? If so, they're display block.

Do they go next to each other? Assuming that they're small enough that there could be space for things to fit. If they go next to each other, they're display inline. And if you don't like that, you can change it.

So pretty much I don't need display inline. I use display inline block. Now, technically up here, we did use display inline.

You could easily just say, hey, you know what? I'm just always going to go with display inline block, just in case. But it is a little extra code here. The only time we need inline block is if we're doing box model things like padding, margin, widths and heights.

So technically I'm not changing the size of this. I'm not adding padding, not adding margin. So I don't need inline block, which gives me that better box model because I'm not doing box model stuff with it.

But down here I am doing padding. So I am doing box model stuff with this. So that's why I want to avoid just the regular inline and I want inline block.

So I think of it as inline better, inline 2.0, if you will. It's almost like display inline was kind of like a mess up and they didn't realize until later like, oh, we need a better version of this. And so I don't know what the history of the development was, whether that was actually the case that they did display inline and display block and then realized, oh, we need a better version of this.

And that's why they called it this. But just think of it as inline better. We got the good box model of the blocks applied to inline elements.

These are one of those kind of weird, unintuitive things about CSS that once you learn it, it's not necessarily hard to fix these things, just unintuitive that you wouldn't figure these things out on your own. And this is why, you know, understanding CSS and all these little intricacies really are essential for getting a good looking page to work the way you want. Okay.

Now I've got the links with the space. I could turn off the background color because all I wanted was the extra space around things. And see, if all I did was just add the padding, see how it doesn't, it doesn't really look good.

Like I'm not getting the vertical padding that I wanted. And this is what people, when they first get started, they just think, oh, I'll just add padding in. And they wonder why it's acting weird.

And it's a simple fix. Just adding display inline block is just an unintuitive fix for that. So I was just using this background color to help illustrate what's going on behind the scenes.

It's also where interacting in the dev tools lets you play around with things and experiment. And I really encourage you to click around on things and you can try out adding things like, so for example, in here, I could have just clicked and said, let me just add display inline block. And, and then I could try that out and see how it works.

And if it works, then I could go back to my code and actually add it there. And if I do something that I don't like, I could just hit refresh and just get rid of it. All right.

Now we're done with the background color. So I could just delete that. We don't need that anymore.

To go a little bit further here on the links, we do want to make them uppercase. So I want to make them all caps. So I'm going to do text, transform, uppercase, and that's going to make them all a little bit bigger.

So I'm going to make them smaller. Now let's say you wanted to experiment with this. Maybe you don't have something from the Designer or maybe you've already had something from the Designer, but you're, you're changing things around.

You're wanting to experiment with things. So instead of typing in an exact amount, maybe from a design, you want to try things out. You could do that in the dev tools here, type in an amount, and then you can use your up and down arrow keys here to play with it.

And let's say we like, you know, font size of 13. I can then copy that and come back here and paste it in. And then that change is now made.

All right. Now we actually have a horizontal list. So hopefully now you can see why conceptually this markup makes sense.

It is a list, but this list looks very different from the normal default bulleted list. All that is, is just changing the styling to what you want. So why don't you go ahead and give this a try yourself by doing exercise four B in the book.