Common stylings

- [Instructor] For the moment our site is quite far the away from the designs. Mainly even just the header isn't finished yet. How do we get the image in here? How do we get the text a little bit bigger? How do we make the layout? So we'll talk about that in the next few videos. But the first thing we'll do is we'll talk about making this text size a little bit bigger. So remember that this stuff in this top corner is grouped together in this navigation and we did the same thing in our navigation in our HTML.

We had this nav tag around all three things. So how do we make this navigation tag even bigger too? Well if we remember from before all the text inside here has this heading one style. So we're gonna make this heading one style appear not just for the h1 tags in general, but also of the navigation two. So to do this we need to go to our style. So we want this text which eventually will be replaced by the image logo to be all of this too. So in my style.css at the moment I have this h1 which changes the font size and the font weight.

Now what I could do is say pick the navigation and make the font size this and the font weight this and this would match this. So I could do nav with curly brackets and then do our styles here, but notice that this h1 tag the thing at the moment up here is gonna match this one as well. So we're gonna say here only select the h1 and comma the navigation tag. So h1 tags and the navigation tags will look the same.

So what this will do now is it will style this up in the bigger size too. So this text has actually got quite a few things on there. So this text up here has these things, the navigation font size and it also has this a tag which is this stuff as well and this hover is part of it too. So this text element has quite a few things on this. It's kind of a common technique in CSS. We're gonna group things and start 'em up as we need them and apply it as and when we need them too.

So here what we've got is these things in the right place. The next thing we'll focus on is our image. How do we replace Aria Oslo with an image from this text?