22. Making our navigation look good - Responsive CSS Tutorial

Key Takeaways

fate f8 so we're taking off where we left off and we're gonna make this look a little bit more like the actual design that we want to have so let's start from the top and sort of work our way down so I already have my header there but this does need a background on it so let's add the background and the background for that one is the f8f8f8 which is a really light color and you can't really see it too well so I'm gonna make it a bit darker for now just make it pink so we can see it and we do see we have a bit of a problem with the it's not touching the sides of our page and while we're here let's just give this a padding on the top and bottom I'm gonna put two M and zero just as a rough estimate and we can always modify that but I think it will work nicely the reason I'm doing 2 M is just through experience I know that 16 1 M is 16 pixels two M's gonna be 32 pixels that sounds about right to me it's one of those things that I practice with I try and just use round numbers on my M s one thing and one piece of advice I will give you an giving padding to things is try not to go too small but we're based on a design and I think 2 M is going to match my design more or less I'm not aiming to make it pixel perfect I'm just making anything to make it look as close as I can that's alright I got sidetracked we have this this problem of the space around so how can I fix that I want you to go and do it before I do hopefully you came up under here and you did your not mean your body and put in a margin:0 on there at the same time while I'm here if I look at this and I also know the whole design but I have this subtitle here and this is using Ubuntu and only the title is using Laura so what I'm actually going to do and I also I you haven't seen it but I've seen the whole design for this I'm also going to take for you bun two font family and put it on the entire thing so I don't have to read Eclair it throughout any of these other things the font size I'm going to leave alone the color for now I'm going to leave alone as well but maybe when we get to the full site and we see the whole layout we can worry about adding a color on the body for the header itself I think that is good except we want to switch this now to our f8f8f8 then we want to start doing some type as I said I usually do my type after my body so I'm going to come here I'm gonna make this a pretty big section so when I say a big section I just put this big thing at the top and I'm a write type type for a word I say all the time I have a lot of trouble saying it there we go typography and I'm gonna come down and we can start styling that up so I might h1 and for some reason everything here is indented so let's fix that there you go and it's everything in Denton sorry my h1 and let's give this the font family of Laura lecture we should just copy and paste it be a little bit faster now one thing you might notice or you might not have noticed but it is it might be showing is bold for you it's definitely I see this is bold and the reason it's showing as bold is I installed Laura on my computer and as we know all the headings by default are bold but I don't want it to be bold and I didn't even install the bold version I only have Laura I only took the link to google fonts for the regular but because I have the bold on my computer I see it but other people visiting this site might not so I am gonna explicitly say I want the font weight to be 400 in this case I did not put that here but I didn't list bold I probably should have written Laura regular or Laura 400 and I didn't so but I'm gonna change my font weight there and while we're here we can set the color so the color for this one is the dark blue which is 143 774 and of course my font size which was or which is 2 REM I'm gonna come down now to my subtitle so my subtitle is a the font family is already okay do you font-weight in this case if you were bolt because I said to Rae bolt in my instructions here awesome it works if you noticed that in my link it was 700 all the better but either one is perfectly fine I'm gonna put 700 because that is what we want to get used to writing designers will often say bold or black or extra bold because in the design software it doesn't use the numbers it gives the weight it just gives like a light or a bold or things like that developers who work a lot with coders might give you the number but there are some that won't so just something to keep in mind along the way if you wrote bold here though it's gonna give you the exact same result so don't worry too much about it we'll also do the color which is 1 7 9 2 D 2 don't forget the hashtag at the beginning or it won't work and last but not least my font size because it needs to be pretty small which is 0.75 mm and it's tiny tiny now the one thing I want to do is I want to pull it up we have way too much space between these so can you fix that see if you can fix it and get rid of the space that's on there so I'm guessing the very first thing you did was put a margin of 0 on here and nothing changes so why did nothing change I'll give you a second to think about it now maybe you already figured it out and you did it when I first asked you to and if you'd hit it amazing that's awesome the reason nothing changed though is while this had a margin top and bottom that we just took off this also has a margin top and bottom which is still there and this also has a margin top and bottom on it which is still there so this big space underneath is coming for my h1 and this space underneath is coming from my ul here so on my subtitle my margin 0 is helping but I mean each one I'm also going to put a margin of zero on that to suck everything up it's also going to balance out that top part I had a little bit better now there are a couple of things the text in this one is all caps and it is spread out a little bit I'm not going to worry about that quite yet we're gonna get into that eventually the same with these with they're all cap and they're spread out I'm not going to stress about that I just want to set up the basics of this for now we're going to explore typography a lot more in the next module which is stepping up our style but for now we're just worried about responsiveness so I don't wanna overwhelm with too many new property so let's get into this navigation now because we definitely need that to look a little bit better I tend because I need to change the color of my nav a and I need to remove the text decoration of my nav a I tend to put all of my typography styles for my navigation in the a here so let's go and do that I'm gonna say that their text decoration since we just mentioned that declaration is none we can set the color of it which is the seventy seventy seventy I can set my font weight to seven hundred and of course we want our nav a:hover here so this is going to have a color on it and I'm just gonna use the bright blue so it's really obvious when we're on top of something and it really changes but I'd made a mistake my goodness what's the mistake that I made I forgot something whenever we have a hover we should also have a focus date so I'm gonna add that on there as well now putting the focus on here is not a hundred percent necessary because when we focus we're going to get the browser's default to having a focus state already see you I get like this glowing box that shows up on something as well as my hover color right now but I prefer always making sure that I have a focus State styled that adds more visual impact than what just the default is it's not a hundred percent necessary but don't turn off that glowy box I'm not even I tell you how to do it right now we'll and there's one last trick and that last trick is the underline that's on here can you think of a way to do it it does involve adding another class and everything else I think you know how to do so I'm gonna let you see if you can figure out how to do that and then the next video will give you the solution