How to css style more than one class tag at a time compound classes

Hi everyone, we're going to take our menu in this video, that looks currently like this to, this, padding either sides, some space between them, font sizes. To do all this we're going to have to learn what a Compound Selector is. It's pretty cool, and nice and simple. It's going to allow us to be fancier Web Designers. Let's jump in and learn what it does. 

Okay, Compound Selector, What is a Compound Class? It's just more than one, we've got a problem now because, what I want to do is I want to style these A-tags. I want to turn off the underline, because I don't want it here, but I've already styled the A-tags. Remember, earlier on, we said, A-tags, we want to leave, we turned that off because we're like, actually we don't want-- we want to leave the underline. So we got one A-tag controlling a couple of things. So what we can do is use something cold Specificity. Just means the more specific you are, the more-- it will override if you're more specific. 

So if I say, generally all the A-tags do this, but if I say, the A-tags specifically in the Nav, do this other thing, that will win, because it's more specific. Generic, a little bit more specific, because we're saying the A-tags inside of the Nav. All right, let's just do it, Dan. In Visual Studio Code, the way you structure a Compound Class or a Compound Selector, compound, just because there's two parts to it. You can have more than one, we're just going to do one. So what we want to say is, we want to say, if there's a Nav with an A inside of it, you just put spaces between it, because we're dealing with Tag selectors, the Nav and the A, it's not a Class, we don't need the full stop. So that's all by themselves, with spaces in between them, and that's it. 

So if there's an A-tag inside of a Nav do this other thing. And what we want to say is Text Decoration is set to no deco-- Text Decoration set to none. There's none. Okay, cool. Semicolon, done, save. Let's have a little look; is that right? Does work; cool. So that one's left fine, but because that one says, the A-tag inside the Nav, you've got it. Compound Selectors, super useful. 

Now we did this way because it's the most simple way, and it's nice, clean and clear. You could have got rid of this. I'm going to wrap it up in my 'Command /' to comment it out. What I could have done is created a Class called No Underline. I'd like to show you both ways, because there's nothing really wrong with this way. And over here I'm going to say, Text Decoration is going to be set to 'none', and over here we could say, actually I would like, after the little, after the href thing, I'm going to put in a Class called, what was it called, No Underline. Save it, and hopefully just one of them will be working now. There you go. 

Now the trouble with that is that I have to apply that class to all of these tags, and that's fine, and if I make another one I have to go and add another class, and there's no real problem with it, but you can see the elegance of this first one; is elegance the word? I feel like it is. Awesome, we've learnt like what Compound Selector is, and the kind of syntax for it, spaces. 

Next thing I want to do is I want to tidy up the padding here. So centering in a box, centering horizontally is perfect, vertically is very hard, surprisingly hard. Don't ask me why, but it is. So later on in the course when we look at something called Flexbox, it will get easier, but for the moment at our current skill level, it's super hard. So what we're going to do is kind of fake it. We're just going to put some padding in the top and the bottom, until it looks like it's in the middle. 

The easiest way to do this, there's a couple of ways, but the way that we're going to do it is, let's add, we'll add some padding to this Nav, because at the moment it's right at the top, so we'll add a little bit to the top, a little bit to the bottom, and maybe get rid of the height. Let's give that a try, I'll show what I mean. 

So first of all let's get rid of the height. That will make it a bit clearer, so it's my Nav, height. We can either comment it out, or just delete it because I don't want it. See, it's kind of collapsed, but if I add some padding to the outside of the Nav, or I could add it the actual A-tags themselves, it doesn't really matter. We're going to do it to the Nav just because I feel like it. We're going to say 'padding', and we'll do 'padding top'. I'm going to make it 14 pixels at the top, and the same for the bottom. I'm just going to copy and paste it. Bottom. Awesome. Let's save it, let's preview in a browser. 

You can kind of see, we get to the same point, so it was collapsed, now this padding, pushing it out. If we did it with margins it wouldn't work, right? I just kind of drum this into you, the difference between margins and padding. Can you can see, there is some padding, there is 14 pixels above them, below there because if I crank it up to 140, you can see, there's lots of space there, but because it's the outside of the box it doesn't really do what we needed to do. So undo, undo, save, preview; nice. 

All right, let's fix up a couple of other things that are bugging me. Like the font size is a bit big, and the space between the menu, our buttons are tiny, so we need to adjust that. Let's jump into VS code. What should we do? We'll do it to the ‘Nav A’s, because I want to make this a font size of, what are we using? Font size of 12 pixels. I want it quite small to kind of match my design. Let's have a look, save, that's a bit better. 

Now let's do the space between them all. What we'll do is a little bit of padding, and it won't matter if it's padding or margin in this case, Padding Left. I'm going to put in 10 pixels. I'll do the same for the right, Padding Right. 10 pixels. Have a look; awesome. Why don't I do both? Because if I do that it's going to be slightly lopsided. It's going to look fine but it's going to push one side, and I guess it doesn't-- you can't really notice it on this. So imagine we've got a bit of padding to one side, but not the other on each of these. So it really, visually doesn't look any different, but you got padding either side now. I just kind of often do that, I just grab my cursor, and click over it, and drag, to try and highlight it, and gives me kind of a vague, just an idea of what's happening. 

So that's our basic kind of navigation. Don't go anywhere yet, we've got an Index page, we'd have to create a Menu page, and an Order Online page, but we've only made one so far, so just using those hashes or pound symbols, just to kind of make them active, but not actually make them go anywhere yet. All right, that is it for our really simple navigation. Let's get on to the next video.