CSS Styling for Optimal Web Layout

We're back to continuing working on this Revolution Travel website. In the exercise, there will be a sidebar talking about some ready files that are only to be used if you have not done the previous exercise or if you lost track of those files or something. But as long as you completed the previous exercise, exercise 3b, then you could just keep using your same Revolution Travel folder.

But if you hadn't done that and you're maybe just doing this one particular exercise to review, then you can pick up one of these ready folders and work with that. All right, so this is where we're at here right now. All we have done is just done the basic structure of the page.

We've got a header, a nav, a main, and a footer down at the bottom. If it helps, we can take a look at this in the browser here in the DevTools. We can right-click and inspect, and we can see that we got the header, the nav, most of it's the main down here, and then we have the footer down at the very bottom.

We've also broken up the main into our heading 1 here, our main topic. Then we've got our subtopics like things to do, and further down the page, another heading 2 of travel tips. This section here is broken down into H3s for the various things that we can do.

We go through Fisherman's Wharf and Alcatraz Island and so forth, so we set our heading structure. Now we want to start to style things. This page content is way too wide.

We don't want it to stretch all the way across the page, so we need to put some limits on the size of that, and we're going to do this with CSS. We could make a separate CSS file to share across the entire website, and we're going to talk about that later in a future exercise. For right now, just to keep things simple, we're going to keep the CSS in a page, and then we're going to talk later about sharing it with a whole website and the benefits of doing that.

We'll get to a shared CSS later. For right now, we're going to embed our CSS into this one page. Learning how to embed things is good.

For example, if you're ever going to create HTML email, knowing that you can't have a linked CSS in that case, it's good to know how embedded CSS works, where this CSS will only work for this particular page that we're creating. So I'm going to create a style tag here, and I'm going to hit TAB to create that style tag, and now even though that tag is HTML, now what we're doing inside is CSS. Now we're not creating elements, we are styling the elements that we already have.

And when it comes to the content that I have on the page here, the nav and the header, those are going to be styled differently. They're going to be centered on the page, they don't really have a lot of width to them. But what does have a lot of width is the main, and then also the footer down below.

I want them to be aligned together, the same size, and because I have two things, the main and the footer, I want to style them both with the same style. Instead of creating a main style here, and then creating a separate one for the footer, and then having to repeat my code, I want to keep my code dry. Don't repeat yourself.

So I'm going to try avoiding repeating myself, and I'm going to say let's make a rule that not only styles the main, but comma also styles the footer. We can style two things at the same time, so both the footer will get the same styles. So the comma just says, let's create a list of all the things that we want to style.

And I'm going to set this width, we could set it to a pixel dimension, but let's say we did that. Let's say I set it to 900 pixels, that is a fixed size. And I'm going to resize, I'm going to hit refresh here, and that is a fixed amount.

So that means that it could be bigger than my screen, it could be smaller than my screen or my browser window, and I have some extra space. Now something that's a little different approach is using percentages. So I could do, let's say a percentage, and I'm going to start with 70%.

I'm going to end up making this different, but I'm going to start with 70% for this demonstration. So 70% would be 70% of the thing that it's inside of. In this case, both of those things are sitting inside of the body, and the body is the full width of this window.

So this is taking up 70% of the window here. Now all of our space is on the right, which I'm going to want to evenly divide that between the left and the right to kind of center this whole column. We'll get to that in just a moment here.

But it's always being 70% on small screens and on big screens. But even so, while that does work maybe a little bit better on smaller screens, and I don't want to be a full 70%. That's a little too much space.

I don't want to make it quite so small. Maybe I'm like 90%. With 90% here on our smaller screens, that kind of creates a little bit of space.

Now it's too much over here. Again, we're going to balance it on both sides, and let's just go ahead and do that. I'm going to say margin left auto, because on the left I want it to be auto.

And I'm going to copy and paste this. Now to copy and paste an entire line, you don't actually have to highlight it. You can actually just click anywhere in the line and hit copy and paste, and it duplicates the whole line without even highlighting.

Awesome, cool feature of VS Code. So on the left and the right, I want auto amounts, because it's space on the left and the right, and I want that to be automatically distributed. We're only doing the main and the footer, so don't worry about the other stuff.

We'll be centering that later, but let's just focus on this. Now this is 90% of my screen, which on small screens actually looks pretty nice, so that as it gets a little bit bigger, slightly bigger screen, I get a little more space. As I get smaller, it's a smaller screen.

I can't afford as much space. So this is creating a flexible amount of space that accommodates small to medium-sized screens. But when we get too big, it's still getting too wide.

So I do want to put an upper limit on this. I want to set a max width as well. So with the percentage, the width says I want to be 90%.

So it's always going to try to do that. But up to, and I want to put a limit on this to say you cannot be bigger than 800 pixels. So you could be 90% of the screen all the way up to 800 pixels, but then you've got to stop, and then you will be smaller.

That's the biggest you can be. Now it has that upper limit. So on smaller screens, it's that 90%.

So it accommodates small to medium-sized screens, and then once it hits that 800, then that is fixed, and it stops, and that is better on the bigger screens where we just don't want that to get super, super wide. Now, for images, you might be noticing that this image is forcing the page to scroll because even though the rest of the text is reflowing, the image, that is not resizing. By default, images come in at their native size.

If they're small, they're small. If they're big, they're big, and they are a fixed size. They're not automatically scaling to fit inside of their container.

That is a default that I always want, but you have to understand that when the web first got started, it was created for basically fixed screen sizes. People had desktop computers at that point. We didn't have mobile phones.

We didn't have to worry about different screen sizes. We didn't need to worry about this kind of fluidity, which when we think about dealing with different devices, we call it responsive web design. So responsive web design is making something respond or change according to different screen sizes.

Technically, that involves creating something called media queries, which we'll get into later. Right now, we're just creating something that is mobile optimized because it is a fluid layout. Fluid means it's flexible and changing like this, but it will look good on all screen sizes.

So these images, they're not fluid. They're a fixed size, and we want to make them fluid. We want to make them flexible, and I want all images to be done that way.

So I'm going to make another rule here. Now, I could put this above this, or I could put it after it. It doesn't really matter, but because these are kind of more specific, and in this image rule, I kind of want this on every website I do.

I'm always going to make an image rule that says all images should have a maximum width of 100 percent. Now, this is referring to the size of their container. They will not be bigger than the container that they're sitting inside.

So whether they're in the main tag or any tag, whatever they're inside of, if you size that, this will not be bigger than their container. That's their max width, 100 percent of their container. Now, notice they scale.

That is something that I always want to be on every website, and so that's just kind of a standard thing that from now on, for every web page or website that you do, you will always want that in your CSS. See, they can't change the rules of the defaults of browsers, because that would go back and change old web pages. So anything that we want to change, if we want to change defaults, we have to add code to change those defaults moving forward.

That's how websites can continue to work the same way kind of forever, and we don't break websites that have already been made. All right, so starting to get a more flexible layout here, starting to look better here. Now, I don't want this particular font.

This is a serif typeface. I want everything in the page to have a sans serif typeface, and later we'll talk about doing custom fonts, but for this website, I just want everything in the body, because everything is in the body. I want this to be a font family that is just sans serif, and it'll actually choose Arial as a first choice, Helvetica as a second choice, and then if they don't have any of those, it'll be some sort of sans serif, but that's just more easily said by just choose a sans serif typeface, and now this is all a sans serif.

In particular, this will now be all Arial. Now, headings. Let's say all of our headings.

We want all of our headings to be the same color, and we don't want them to be bold. They're bold by default, but I can turn the bolding off. So I can go in, and I want to make a rule for all my headings.

My heading one, my heading twos, and my heading threes, because I don't want to repeat myself. I want to keep my code dry. Don't repeat yourself.

This is where I can say, let's choose a color, and the color that we're going to use is our orange color. This particular color, and I'm going to save that, and now all heading one, heading two, and heading threes are all now that orange, matching our logo. Very nice.

I also want to take off the bolding. So font-weight is where we can set different numbers, which some of them coordinate with certain keywords. So for example, 400 is normal, and I think it's 700 is bold.

So some of these have keywords. Some of them don't. They give you a lot more subtlety going from one, which is very thin, to 900, which is very bold.

But you also have normal. Normal just means don't make it bold. If something was bold by default, we're now overriding that.

So instead of font-weight bold, we're saying make it font-weight normal. Now it's the normal. Just because something defaults to a certain appearance doesn't mean we're stuck with it.

We can use CSS to override that. And so yes, browsers have default appearances because they have a default style sheet. We are essentially overriding that default style sheet and just saying, no, get rid of the bold and change it to what I want.

Now this is the stuff for all of my headings, but I want to specifically call out a font-size for my h1. So I can't put a font-size in here because that would make all of my headings the same size, which I don't want. So these are the things that are common to all, and then I'm going to come in with things that are exceptions.

So I'm going to say, well, the font-size of my heading ones, let's say that's going to be 28 pixels. So a little bit smaller than the default. And I want the heading twos to be a font-size of 23.

And normally when you'd be doing something like this, you would normally be referencing a design. A lot of designers will use Figma, whether you're creating them in Figma or a designer is creating that. And so you'll be looking at a design from a designer usually, and you'd be seeing what they chose for their font sizes and basically just saying, oh, okay, 28, 23, 18, and putting in those different sizes and just making all of those just a little bit, a little bit smaller.

Now, when things reflow onto another line, we can also adjust the spacing between those. So for example, if we think there's too much space between there or not enough, we can adjust the line height. So I can do line height and our design calls for 36 pixels in this case.

Let's see if that's more or less than the default. It's a little bit more. So they didn't like how close the lines were.

So they opened that up and made the line height a little bit more. All right. Now, when it comes to the space between paragraphs, so for example, these are paragraphs here.

I can see what the default margins are by right-clicking on this and inspecting, and I can see that there are 16 pixels above and below. The default font size of paragraphs is 16 pixels and the margin on top and bottom is 16 pixels. So that's one increment of the font size.

So 16 pixel type, 16 pixels above, 16 pixels below. If we want to change that, we can. We could add space.

We could remove some of the space. We want a little extra space between our paragraphs. And also the lines are a little close.

So I want to make a rule for our paragraphs. We're fine with the default 16 pixel size, but the lines are a little too close together. We're going to increase the line height, put them a little farther apart.

It looks a little bit nicer. And also I want more space between the paragraphs. We're going to do margin bottom.

So margin bottom. Designer is calling for 22 pixels in this case. So it's going up from 16 to 22.

If we want to see the difference here, I can have the dev tools open here. Let's make this a little bit bigger. And if they weren't open, I could just right click on any paragraph, inspect.

That would highlight the paragraph. So I see this stuff down below. I can also, if I was on something else, just click on a paragraph.

And here I can see the line height increasing the space between the lines. And I can also see that there is a change there. Be looking at the difference here where we have two paragraphs and notice how we're getting extra space.

Now we're just getting a little bit of extra space because we went from 16 to 22. Not a huge difference there. But what I want to emphasize here about this and understanding the box model a little bit better here is that when we see these two paragraphs sticking on top of each other.

So there's one after the other. This paragraph has 22 pixels below. And let's just say I make that 40 here, just we see even more space just on that one.

Notice that this one here, and let's just say this is 10. So this one has 10 above and this one has 40 below. Notice that when I look at this, watch, watch that space and watch the orange, watch the bottom orange here and the top orange there.

And they occupy the same space. So what's happening here is we're not getting the 40 below this plus the 10 above this. No.

And actually, maybe if this makes more sense, maybe I make it even more. See, see how that's not increasing. Right.

See how it's being absorbed into the top margin. Well, I shouldn't say top margin, the upper margin, right? The one that's below this paragraph. Right.

So this has 40 pixels below it. This one says, oh, let me do my own margin, but notice how it's being absorbed. If I do zero and notice how it's still not changing it.

Now, remember the other one has 40. Now, once I get more than 40, oh, now we're getting, now we're getting 50. Right.

So what's happening here is we're seeing something called margin collapse. When you have two things that are the same elements here, that the one has margin below and the one has margin above, those two margins are not added together. It's whichever one is bigger, they collapse into each other.

So the smaller amount gets absorbed into the bigger amount. So it's whichever one is larger. So it's either the 40 or the 10, in this case, the 40.

It doesn't matter whether it's the top margin or the bottom margin, whichever one is bigger, you're getting the bigger of the two, which is why once this gets above 40, now, now we're getting 80 pixels. We're not getting 40 plus 80. We're getting one or the other.

The smaller amount gets absorbed into the bigger amount. And so that's just something that happens with vertical margins only. It does not affect horizontal margins.

So left and right margins do not exhibit margin collapse, only vertical margins when two objects are next to each other. So just something to be aware of when you're calculating total margins that are there. Okay.

My sections as a whole are a little too close to each other. Like the header is too close to the nav, which is too close to the main. I want to put some space between all four of these sections.

So I'm going to put margin bottom of, let's say, 30 pixels for all of those sections. And since I want the same amount on all of them, I am going to make a rule for all of them. So let's say I have one for, so I'm going to do header.

I'm going to do nav, main, and footer. This we're keeping our code dry. Don't repeat ourselves.

Margin bottom 30 pixels, I said 30 pixels. So all of those sections are going to get that bottom margin of 30 pixels. And then we get a little more space there.

If it helps you to see, I'm just going to make these even bigger, oh, but not there. Sorry. Let me hit refresh.

Go over here to styles. And so let's increase it there just so you can really see. See, so here the header has space below it.

The nav has space below it. And down below, the main also has space below it. And the footer has space below it.

We just want a little more space between our sections just to help separate them just a little bit. All right. Now, looking at the header here, I want to put a line across as like a divider line.

So I need to put in that bottom border, and that's only on the header. So I'm going to make a rule just for the header. So I don't have a rule yet for that.

No, I don't. Okay. And so that's going to have a bottom border.

So border-bottom. Just a thin one pixel solid gray. One, two, three.

So anytime you see all of the numbers or letters being the same, you know that's a shade of gray. And numbers are darker. Letters are brighter.

So they're going to be just a very light gray. So nice little divider line going right across there. And when we look at our computed tab here, remember that border has space inside with padding and space outside with margin.

So I put margin underneath there, but I want to put some more space inside like to separate the logo from that border. And so that would be padding because the border needs space inside of it. So I'm going to do that with padding.

So I'm going to say that that header should have padding on the top of, we're going to do 20 pixels. And I'm going to copy and paste that. And because I just have my cursor anywhere in the line, it copied and pasted the whole line.

We're going to do padding on the top and the bottom of 20 pixels. So it even amounts of space on the top and the bottom. So there we go.

Now we've got our padding inside that border and we've got our space. Okay. We'll come back later and center.

I wanted to keep that centering for later. Once we see that we can share our CSS across multiple pages, we're going to center things and we're going to see that that's going to change everywhere in our website. So some of these things we're going to hold on and we're going to do later.

There's going to be a series of exercises that we do, but let's go ahead and do exercise 3C so you can get some hands-on practice doing this part.