Switching Projects and Styling Backgrounds

We're done with Revolution Travel and we're going to be moving on to a different website, so I need to close this project. I could either create a new window and open up a folder in this window, then I could close the other one, or within the same window I could simply say close folder, and now I can open up a different folder. So I can go over here into my explorer, click open folder, or go up here to say open folder there, and then I can go in to my Hipstered project here.

So just as a reminder, for every website that you do, you want to create a folder, and into there you're going to put your images that you're going to be working with. You will create an index.html, a main.css, and you could do that by clicking the little plus button here, new file, typing in the name of your file—I'm just going to call this demo.html—and when it comes to the initial page, the index.html, or whatever page you're creating, to type in all of those standard tags, you can use Emmet to do an exclamation mark, so press Shift+1 to type an exclamation mark there, and then when I hit TAB, I can get all of the standard tags.

This is going to give you your document type, your language is English, assuming everything is going to be English in this page, don't mess up my special characters, make sure they're encoded all properly with Unicode. It puts in the meta viewport tag that we always want to have in every page.

So this is all the standard tags. You'd want to customize the title of course for this particular page, and then you can get busy adding your content into the body. So that is what we've done here; it doesn't matter whether it's 1 or 1.0, it's the same thing—we just like the shorter 1 instead of 1.0. It's a little bit of wasted code by adding two characters, but if you want to leave them, that's fine.

And so I don't need this demo anymore, so I'm just going to right-click and delete that, and also for main.css, you just click new and type in main.css, and you'll get a blank CSS file, that you don't have to have any sort of special framework or anything to start that out—you're just going to be adding your CSS rules as you create those.

All right, so we always want to open up that folder so we have easy access to all the files that are going to be in this website here. Before we get started too much on this, let me just show you here what this kind of final result is going to look like. I'm going to open up this one here, and I'm going to open this up in my browser here.

So this is where we're going with this design: we're going to have a large photograph here with some text on top of it, we're going to have a logo at the top left, navigation over here on the right. Notice how this is going to be flexible and work across different screen sizes. I'll have some text down below—so curated coffee, this will be our main kind of heading for the page.

We also have some other subheadings here, some heading twos as well. We're going to start by creating the main sections, so let's think about that. Up top here, as far as kind of introductory things like logo, navigation, those kinds of things, we could have a header up at the top to kind of get the page started.

We could put this potentially in the header if we wanted to; it is kind of, in a way, maybe introductory stuff, but it's also like if people are really coming for this page, the main content is this. This thing here could be—we could call this a header; we could maybe call this nav up at the top. There are some choices that you could make depending on how you want to do this.

Also, you don't have to use header and main for everything. If there's some section that doesn't really make sense to use one of those tags, you can also use a div tag. A lot of times people call this a hero area or a masthead.

I don't know exactly why they call it a hero, but that's just a common term for these. We could also create a div tag where we just call it, give it a class of hero for this area as well. If we want to do it with that approach, let's say just to show you an alternative here, the divs are okay to use if there's not a more meaningful tag to use.

We could have the header at the top and, like we have a footer at the bottom, we could have this be a div of hero, and then this could all be the main content. The real reason that people are coming is to read about the coffee subscription.

There's going to be coffees delivered to your door, a coffee subscription service. All right. So with that in mind, we can kind of create our sections.

If that was a Figma design that somebody had sent you or some sort of design, you would look at the design and start to think, how am I going to section out my page? And so if I want to create a header, I type in header. I can use the Emmet expansion to hit TAB to create the header. For right now, I'm just going to type in header.

This is just placeholder content. We're going to put real content in a little bit, but I want to focus on the hero area first. And so the next thing I'm going to do is a div, and that div tag.

I'm going to give a class of hero because you could have lots of divs on a page. So you don't just want to use a div by itself. Usually you're going to want to put a class on it so you can know when you're styling it which div you're styling.

And in that hero, that's where we're going to put our heading one, that main large heading that says curated coffee. And then on the next line, we have some paragraph of text and we've got this text here. This is like a little tagline underneath, like so.

And if I preview this here, I can preview this in my browser here. Later we'll come in and put the real header content here, but in this exercise, we're going to focus on styling this area here. Before we do that, let's just add in the other main sections here.

We're going to have some main content here, and then we'll put the footer down below here. Now let's focus on styling things. I'm going to go to our main.css and just to get things started, I don't want this default serif typeface.

We're going to do a font-family of sans-serif. We're going to learn how to do some custom fonts in a little bit, but for right now, just want to get over to some sort of sans-serif font. And by default, when we have our content, there is some space outside of that content.

The original makers of the web—there were no images at the time; there was just text. So I think, rightfully so, they kind of made the decision to put some page margins on the page because text doesn't look good up against the edge of the page.

So they have some default page margins. In these days, when we do images and we have things going edge to edge, we don't necessarily want those default margins, but they're there. And so we're going to get rid of them.

And theoretically, they probably should have called this padding because it's space inside of a box. But if you think about things like Microsoft Word, they call them page margins. When we think about it on the body, it's called margins because of historical reasons.

All right. So—and actually I just realized we're not having any effect here. Why is that? Well, because I've never linked my page to the CSS.

So this is not sans-serif. I had not removed the margins. And even though I'm saving this file and refreshing, there's nothing in this page telling it to use our CSS.

We must link to our CSS. So I'm going to come here and add a link tag here, hitting TAB so that Emmet can expand this. The thing that we're linking to here, the relationship to this is—it is a style sheet.

And what is the name of the file relative to the current file? So I'm in index; main.css is right there. We're using the same relative links that we do for images or linking to other pages. So again, if there was a folder, like let's say you had a CSS folder, you'd have to say CSS/ to go into that folder, but we just have everything in the same folder as the HTML.

So I can just say the name of the file. And now that I've linked to that—now it works. Now we're getting our fonts and now we've gotten rid of the page margins so that when I put a background image behind this, it will be able to go edge to edge.

And then we'll individually add padding as appropriate to specific areas or limit the width so it doesn't go edge to edge. So some things can go edge to edge and some things could be narrower as we want those set up. All right, let's focus on these areas right here.

I want this heading to be bigger. It's going to be a nice big thing centered on our screen. So I want to style in the hero here.

I need to center all the text. Also, the heading needs to be big. So let's go here to our CSS and I can say, well, I want my heading here.

And also, by the way, if let's say I want this to be next to this so I can see both at the same time, you can drag this file and you can put it over here on the right. So notice how it kind of highlights. And if I drop it up here, notice how I can put it on the right.

So you can drag these tabs and you can combine them; you can put them next to each other. And so if you want to be able to—if you have a big enough screen—to be able to see your content and remember things like your names, you can see your CSS at the same time if that makes things easier, if your screen allows for that.

So I want to increase the font size and make this a lot bigger. We'll do 95 pixels for that. So nice big heading there.

Everything in this entire hero section should be centered, so everything in the hero should be text-align: center. So all of that stuff gets centered.

We're not going to worry about the other sections right now. We're going to be focusing on this hero area for right now. And I want to put a color behind this.

We're going to switch it out to be a photo, but for right now I'm going to put a background color on this. And we're going to choose a brown color.

This is for coffee. We're doing a coffee-colored background like so. And it's a bit hard to read dark black text on a dark brown background.

We are going to change the color of the text to be white—that's FFF—or you could just type in white.

Now we've got some white text on there. And I want some more space in this background-color area. So I'm going to increase the padding and put some padding on this area.

We'll start with 30 pixels here just to get started with some. And now we have some space. We got the header up above, the main stuff down below, and we're going to be working on this area here.

A lot of the space here is created by margins on the heading, and we will customize that at some point. But for right now, I just want to focus on backgrounds and how backgrounds work.

When we're dealing with a background color, that is the color of course behind the text in whatever area is created by the text. And so that's important to know that when I inspect this and let's say go into my font size—when that is smaller text, notice the height of the brown area gets shorter because there's less content.

If I were to delete this paragraph, notice the brown area gets shorter. If the content is made bigger, notice the brown area will get taller. So the background area is defined by the content that's inside.

So the content creates a certain space and the background just occupies that space created by the content. And so as things reflow, again, the height of this changes. All right, now let's say instead of a color, I want to put in a photo.

So I'm going to keep the background color for right now just to explain something in a moment. But I'm going to put in a background image. And so let me make this a little wider here.

And in fact, actually, just to save some screen space here, I'm going to make it full screen again here. So for a background image, we need to give it a URL. And that is the address relative to where we are in our CSS file here.

We're in this CSS file, and notice there's an images folder. And in that images folder, we've got this hero photo and we've got this pattern. Now this pattern, if I zoom in on it—if you can see here—it's a very subtle contrast, but there's a little bit of dark gray here, light gray.

So it's kind of got this little kind of diamond-ish, a little kind of grid-like pattern. We're going to start with a patterned file and then we're going to switch to the photo just so you can see the difference between these things. But I need to say, how do I get from this CSS file? How do I find the image that I'm looking for? Well, it has to go into the images folder.

So I need to say images and then now that I'm in the images folder, I want to use the pattern. Okay, so I'm going to save that, come back, hit refresh. And we were looking back here at just one version, like one tile, right? So our pattern is going to be repeated automatically by the browser.

That's how background images work: they work like a pattern. We give it one image, which is one tile, and it just keeps tiling it over and over again.

And it creates many, many columns, and whatever height it has that's determined by the content, it'll create many, many rows. So how many columns and how many rows will be determined by the size of the content and the size of your screen. So, you know, how big is the browser window in that? And so, you know, it's going to start at the top left and just go across. So the right-hand side, things might get cut off.

Down at the bottom, things might get cut off depending on where it ends, right? And so it comes in at its native size and just repeats over and over again. That is the way that it works. Even if you have a huge image and you don't see the repeating, it is still repeating behind the scenes.

And that's why I wanted you to see this. So even if I go back and I say, well, let's switch to our hero, and that hero is very large. If we look at this, this is a much bigger image.

This is 1280, so 1,280 pixels wide—so a much bigger image here that we're talking about. And so when I hit refresh here, we might not be seeing that whole image, right? So it depends on how much space we're seeing the top left of that image. I'm leaving the image back there so you can see it.

And then if the browser window is big enough, you might see all of it. Or if your browser window is big enough to go even further, then you might see it repeat. This is where you want to be careful if you're dealing with really big images.

If somebody has a bigger screen than you, you might not have seen it repeat, but it still will repeat beyond the size of potentially your screen. Now, as far as the height, it would only repeat height-wise if the height of the content creates a situation in which that content goes down far enough, creating enough space, which this content is not going to do that in this situation. Now, this is not actually how I want this to work.

I want to not necessarily have the same cropping that I have here, and I don't want it to repeat. If I do have a bigger screen—if somebody does have a bigger screen—I don't want that to be repeating. So there are settings that we can do to customize this, and I think this is easiest to do by playing with it in the DevTools here.

So I'm going to inspect this here, and I'm going to select the hero here so we can see the settings, and we can experiment with the settings here for positioning and sizing our background images. First of all, background position. So background position.

Background position is shorthand for background-position vertical and horizontal, essentially. So actually, when we go back here to background position, notice there's background-position, which is shorthand for X and Y**. X is the horizontal, Y is the vertical. If you don't remember which one is which, by the way, **‘Y’** looks like an arrow pointing down.

So that's the vertical, and X is the opposite of that. But we're just going to do background-position, where we can do both X and Y**, horizontal and vertical, all in the same place. So the default is left top.

If I say left top, that's the default. That's what it is right now. So horizontally, it's on the left.

Vertically, it's at the top—so it's horizontal first, vertical second. If I go and let's say I make this right top, now I'm seeing the top right of that image.

If I do right bottom, now I'm seeing the bottom right of that image. And if it helps you, let's go back to vs. Code. So just remember here, we've got the coffee cup here.

We've got the grounds up here. And so down at the bottom right, we're just seeing mostly just coffee beans. And we see the coffee beans, and then we do see, if there's enough.

But see now, as I resize this, notice we're always seeing the right bottom-most area. We might not be able to see anything else if this is small enough. We can change the position.

We can also do center. And while I can say center, I can actually just say center, and then center would assume it's for both horizontal and vertical. If I want to see the middle always, I could just say background-position: center, which—that's actually what I like.

So I'm going to copy that and go back to vs. Code and put that in because I like the background centering. We're going to keep that. Also, as far as these, the order of these properties—you can put these in whatever order you want.

There's nothing special about that. If you want to keep all your background stuff together, I think that makes sense to keep them all together, just conceptually. But you can put these in whatever order you want.

Now, notice how the color is not visible anymore because the image is there. So I'll save that and hit refresh. If the image doesn't load, then and only then will we see the color.

You cannot define the order of these, this kind of stacking order. So essentially, you have your content. Behind that, you have the image.

And behind that, you have the color. That's not something you can define. That's just the way it works.

Technically, if your background image were transparent—if it were a see-through PNG—you would be able to see through to the background color that's behind it. But so why would we even leave that background color there? Let's say while the page is loading, this image could take a little while to load. And so while that's downloading, this is what we would see because of the background color.

Now, if we didn't have that background color, this is what we'd see. So you remember there's white text. But if the page background is white, it's a polar bear in a snowstorm.

You've got white text on a white background, and you aren't seeing anything until that image finally loads, and then you see it. But it might be nice that during the loading process—especially if somebody were on a mobile phone viewing this on a slower mobile connection—this background color loads instantly. It does not take time to download that background color, while it might take time to download the background image.

So this can be a nice fallback: people would see this, and eventually the image would load. But in the meantime, they can still read what they might be missing otherwise. We're going to leave that there intentionally.

That's a nice fallback. All right. Now, while we are centering, keep in mind—it is still a repeating background image.

And I'm seeing repeats on the left and the right now because this is being centered, both horizontally and vertically. Also, when we think about different screen widths or different device widths, on a desktop, we can have more space. But on a tiny little phone, we don't want to take up as much space.

So this padding amount here is a fixed amount. Relative to the phone, 30 pixels is a lot more on a phone, but it's not very much on a desktop. A desktop can afford more, and we can have more.

And so maybe a pixel amount is not the most appropriate. Maybe a percentage, which would be based on the screen size. Actually, not so much the screen size as the width of the element.

And since this hero does go the full width of the page, effectively, it is the width of the page. But when you do a percentage of padding, what is it a percentage of when you say 15%? Well, it takes a look at the width of your object. In this case, the hero goes the whole way across.

So it takes 15% of that. So let's say that was a thousand pixels. If it's a thousand pixels, that adds 150 pixels on all four sides.

Now, if you're talking about a much smaller phone, now you're talking maybe like 350 pixels—350 × .15. Now it's only 52 pixels. So a phone is going to get less because it's a percentage of the width.

So using a percentage, I think, makes a lot of sense for something like this. Because instead of saying different amounts on different size screens, you're getting different amounts. Even though it's adding that padding on all four sides, it looks at the width, takes that percentage of the width, and then adds it on all four sides.

So this gives you an amount that can adapt to different size screens without you having to put in different fixed pixel amounts, which can be nice. So that can open up more space, which I like to have. But it does raise the issue that this is a repeating background image.

So I want to size this background image. Now let's play with size here and see how the sizing works. I'm going to be doing this on my hero here, and we have background-size.

So background-size: there are different keywords, but you can also type in different amounts as well. So you could type in pixel amounts if you wanted to.

So I could say this is how big, and notice as I'm doing this, this is changing the size if I just put in one size. Now you can also put in another size here. So notice as I'm changing this second size, notice how I'm changing the height.

I'm using Shift+Arrow keys here to change this. The first one is the width here. If you just put in one value, notice how it's the width, and it's automatically doing the height.

If you put in a height, you’d better make sure that that's proportional unless you're intentionally distorting that. But the point here is that these two values are width and height. If I add background-repeat, I can take it off.

I can say background-no-repeat, and notice how it's not repeating. Now I'm just seeing one of these. I'm setting the width here and also setting the height.

Now we probably don't want to set a specific size this way for this image. I probably want to use a percentage. Now we just saw that this is width and height.

So what if I say 100% for the width, and then what do I say for the height? I don't want to put in a fixed pixel amount, but I could say auto—you figure out, browser, what this should be. I want to fill the entire width here, and so notice how it's going to scale up and down, and then it figures out the height to be proportional.

That looks great, except the only thing is we are fitting the width, and notice now that I've taken the repeat off. Notice how it's not repeating there. Now it could be repeating there, but either way I don't really want it to repeat or to show the background color.

But, oh, notice that if you don't have image there, you do see the background color, by the way. When I get to something that is taller here—in this case, I really want the second value to be 100%, but I can't use 100% all the time for width and height, because then it's going to be distorting that image, because the width and height—it's always stretching, and it's not matching the aspect ratio of the original image, because the allotted space is not the same aspect ratio as the original image. You know, it's sometimes wide, it's sometimes tall.

So here, if I did auto for the width and 100% for the height—so now the height is filling, and it figures out the width. That's good, but then the problem is here, when it's wider, see we kind of want to switch back and forth between 100% auto or auto 100%, but how do I do that? That is what these keywords are used for. If you use something like contain, contain is saying I always want to see the entire image, right? And so that's not what I want, because I don't want to see the entire image.

I'm okay with some of it being cropped off, because if I see the whole image, there's going to be some empty parts, and I don't want that. So instead, I want cover. Just cover the whole area.

Whatever you need to do—whether it's 100% width or 100% height—it will dynamically switch between that 100% auto or auto 100%. Just cover the whole area. Just figure that out for me.

In this case, you will never see the background repeat. So you actually don't need a background-repeat, because you're never going to see a situation in which that will happen when we're using background-size: cover. So that is what I want for this—background-size: cover.

We're going to put that into our code, and that looks nice. That is how we want that to work. Lastly here, I have just generically positioned this in the center, and you might want to have a little bit more control over this.

We can put in pixel amounts, but with this whole scaling dynamic and how big this is, a pixel amount might not be the right approach. Again, a percentage might be good. We've got the horizontal first, and let's say the vertical.

I want to change the position. So top essentially is a keyword. You've got top, center, and then bottom.

But you also have them as percentages. You could say 0%. So you're starting 0% down from the top.

As I increase this and I make this higher number, notice how I'm moving down. So by the time I get to 50%, essentially that's centered. And if I get all the way down to 100%, that's like saying the bottom.

And if I keep going further, we would see the repeat, and I don't want to do that. So I want to stay somewhere between 0% and 100%. So instead of just being limited to top, center, and bottom, we could do somewhere in between, where maybe I don't want it all the way at the top.

Maybe I don't want it all the way in the middle. I want it to be somewhere in between. Do I want to favor the coffee grounds? Maybe do 30%? Or do I want to favor the coffee cup and maybe have it somewhere in the middle? You know, I could do 70% or 75%.

And I don't have to be limited to just those keywords. Maybe something like that will be nice. And I could put that back in.

And so this way you can choose to have something that's nicely sized, that works across various screen sizes, and you have an image behind. Notice that I did this as a background image with CSS, and that there's a layering effect of type on top of the photo. If I used an image tag, the image tag would be like down below here, for example.

So as we've seen images so far, we've always inserted them within an image tag. And those will be either going across in a row if you have multiple images, or if you have an image and then text, they're not going to be on top of one another. Like I could put an image down here after the footer down below it, but it wouldn't be behind it.

So anytime you want this layering effect—to have something behind—we're not using an image tag; we're using CSS to add it as a background image instead. So give this a try yourself in exercise 5a in the workbook.