Lessons

Lesson Info

Creating CSS Rules for Layout and Images

Let's talk about something called the CSS Box Model. So the Box Model in CSS, if you sort of imagine all of the elements in your page, the elements all are inside of these box areas. So the browser, when it sees the HTML, automatically puts these bounding boxes around everything in your page. And it's these bounding boxes that are the most important for styling CSS because we target these elements almost like they're graphic boxes in a design application and we size these, position these, set these to float. All the things we do to these is based on this particular box area. So, let's switch back to our computer, and let's take a look at some of the things we can start to style with our box element. With our box properties. So, in our HTML, over on the right-hand side, I'm gonna scroll up. We have our HTML up here, in the top of the document. And I'm quickly gonna switch back to our HTML file. And what I wanna do is I want to remove the... I wanna remove the... There we go. And so what...

I wanna do here, is I wanna remove the width property we put on the image at the top of the screen. So we set a width of just to make that a little bit smaller. But I want to get rid of that. So now we have that giant image showing up because that's a really large graphic that will look great on high-definition screens. Now we'll go back to our CSS, and we're gonna start applying some of these particular styles with CSS instead of setting the image size. Okay, so on the right-hand side, we have our header element. So now that we have this idea of a box model, this entire area here is inside of that header element. So what we're first gonna do is bring in that countertop graphic, and we're gonna bring it in to the background of that header. So we're basically gonna put a graphic behind all of this content inside of here. So we're gonna do that by coming down here and typing header, then a space. Put in our brackets. So we're now targeting the main header element. And let's start by assigning a background property. So I'll type background, colon, Space. And there's a few properties we can put in here. And we can put them all on the same line together. So the first property for background is gonna be a background color. If you don't put in a particular color, it'll just pick up the default from the page, which, in this case, is gonna be white. The second property is an image. So let's start with a color. So I'll use a Pound sign, and I'll use three zeros, just to make the header background white. And you can see down here, the header, it's only the header area that is turning black. If I scroll down here, here's where the Spice element starts. So now you can sort of visually see where that header begins and ends within the page. So after the color, let's hit a Space. Then we're gonna type URL. Put in a beginning and ending parenthesis. And inside of the parenthesis, we can point to a graphic image. We can basically use CSS to go and import a graphic and put it as the background of the header. So we're gonna point to images forward-slash. And the images/ goes into the images folder. And then we're going to point to the countertop. So countertop.jpg. Once I've finished typing that, we'll now see that graphic is now showing up in the background. So there's the countertop graphic we created in our other course specifically for importing into this particular project. Let's hit another Space. The next property we can set is the repeating property. If we bring a background graphic into an element, it will automatically repeat like a checkerboard. So if we brought in a tiny little circle, it'll just fill up the entire area with circles. The wider the browser, the more circles we would see, and the taller the content, the more circles we would see. But we can control how that repeating property happens. So we're gonna come here and say we want to repeat this only on the X-axis. The countertop graphic we created, the pixels on the far-right match the left, so we can have this tiled horizontally for as long as we need. This will give us the ability to have this webpage stretched to any width inside of the browser. Next we're going to set the x position and then the y position. So there's five properties that we have. We have our color, we have the image, we have the repeating property, and then we'll have an x property, which is the horizontal property, and the y property, which is the vertical property. And so what we're gonna set here is center for the x, and we'll just set zero for the y. So it'll just align to the top. So I'm go back to the OS, and let's just come in here and take a look at what we have so far. I'm gonna zoom the browser out a little bit, just so we can sort of simulate what this would look like on a really large screen. And you'll see that as I open and close this background, you'll see the countertop moving. The type at the top, our subhead, and this image, which is a fully-transparent PNG file, shows through to the background of the countertop. And so it's really kind of fun here, is if we open and close the browser, we can see the movement of the countertop independent of the other items within the area. Within that heading area. So it gets really sort of fun as things start to move around and change. Okay, so let's go back to our CSS. So we have that one piece in place. So now let's come in here, and let's target the green text up here. We're gonna need to set that to be green. And so let's go into... Okay, so to get the color that we need for the heading, let's jump over into Sketch. We setup this design in another course. So this'll be a great opportunity to go in and see how we can get some colors from one of these graphic applications. So if I come in here and select the Herbs and Spices content here, we can see the color property. If I click on this, notice that I will get all of the properties that I need down here. We can see the hex values, plus the red, green, blue, and alpha properties. So here's the hex value we need for that green. It's A2C144. And we can get the same exact properties from Photoshop if we were to do that inside of Photoshop as well. So I've copied that to the clipboard. Let's switch back to our CSS file. Let's hit a few Returns. And what I wanna do, is I wanna target that h1 tag. But if I was using this style sheet for my entire website, I wouldn't wanna have all of my h1 tags to be green. I might wanna have them different colors on different pages. So CSS has something called its level of specificity, which means we can create CSS selectors, or rules, that are really specific to items within the page. So I'm gonna come in here and type header, then a Space, and then h1, and put in our brackets. So this is a much more specific CSS rule than the heading one we had earlier in the page. So the heading one, up here, is going to target every h1. This one down here, with a higher-level of specificity will target h1 tags only if they're inside of a header element. So it creates that parent-child relationship between the content that we wanna target. And so now we're gonna come in here, type in the word color. We're gonna type a pound sign, paste in the content we got from Sketch, in this case, the color, and then put in our semicolon. And so now, Herbs and Spices is now showing up in that particular color. Again, if we had an h1 tag that wasn't inside of a header, then that color would still be brown, because it wouldn't be getting targeted based on its parent, here. So now let's do the same thing for the paragraph element. We have lots of paragraphs on the page. But we only wanna target the paragraph in the header in order to color this white. So let's come in here and type header, Space, p, put in our brackets. We're gonna set the color to white, so the shortcut for white is a pound sign and three Fs. Semicolon. And let's come in here and set the font size, and we're gonna set this to 1.2em, which is basically 20% larger than the base font of 18 pixels. So with these in place, we can now see, we have our header showing up here, and our h1 tag showing up at the top. Yes? Fon1, is that, like, shortcut for something? Oh. Fon1 is not a shortcut for anything. Okay. Font-size... Sometimes you get so used to your code editor completing stuff for you, that I assumed that it did it for me. Alright, so here we go, so that's larger here. And you know, I'm also gonna come in here and set a line height on this. So we're gonna set a line height to, maybe, 1.5em, and just tighten that up a little bit. Or maybe one point... Maybe 1.3. So again, just like we would set letting, I can come in here and change these numbers, and we can change the amount of space between these pieces. Now let's targe the image inside of there. So I'll type header, Space, img. So that giant spice graphic, we can finally get rid of that. Earlier we set that with a width attribute in HTML, but this is actually a little better way to do it. I like to keep my HTML as clean as possible. So we're gonna come in here and set this with CSS. So we have a width property, we talked about this being one of the most common layout tools. And we're gonna set the width to 325. And when we're in CSS, we have to specify a measurement, so I'm gonna put in px, for pixels. If it's a width attribute on HTML, HTML just assumes that it's pixels, but here, we're actually gonna be specific in the CSS file. And so now we can see that showing up here. Okay, so let's do something a little fancy. So we're all envisioning the box model, right? We're imagining boxes around the h1, the paragraph, and the image tag? And margins control the content outside of the object. Well, in the design, I really want the countertop to be half-way through the image that we have inside of here. So the image is in the header element. The countertop, here, is behind it, it's actually being brought in as a background graphic. So what we're gonna do is set a margin property on this image, and I wanna set a margin bottom to a negative value, which means the header that goes around all of its children is actually gonna come in a certain number of negative pixels. And so we're gonna do that by adding that property to this image. So we're gonna come in here and set a margin property. And we're gonna set 15 pixels on the top, so that'll push that away from the top a little bit. Then a Space. On the right we're gonna set zero. On the bottom we're gonna set -50 pixels. And then for the left, we're gonna set zero. So now, check out what happens. So now the header is allowed to close up negative 50 pixels after going around our h1, our paragraph, and our image inside of here. So now this gives us that really, sort of, interesting layered effect, but it doesn't have anything to do with... Or, it won't change if we add or remove content, or as that content has to grow or shrink. So to demonstrate that, let's go back to the browser. Let's hit reload, we can see all of our CSS showing up in place. So if I close the browser up, right now the heading at the top is taking up two lines. If I close this down to the point where the heading is taking up three lines, notice that the header is still allowed to go 50 pixels up inside of this image, here. So the design will respond and be... Will have a variation built into it because we've set that negative margin. And if I go even further, let's go into Responsive Design Mode of Safari. If I bring this down to four or five, it doesn't matter how tall this gets, we always have that relationship with that header sort of moving in there. So without doing anything really sophisticated, just by setting margin properties, we can start to create some of this layering effect with all that content to get some of this in place. Alright, so let's close that out. Let's hit Save, so let's continue on. Let's start targeting elements inside of the article area. So let's a hit few Returns. And, first, I wanna start by just targeting the article element itself. So we'll come in here and type article. Put in our brackets. And let's come in here, and let's set a padding property here. Now, as I mentioned before, padding will affect everything inside. Right now, we have all of our content is touching the edge. I don't know if that's bothering you guys, but it's been bothering me for a little bit. So let's come in here and change that. So on the main article, we're going to set a padding property. I'm gonna set zero on the top, and then a Space. Then I'm gonna set 30 pixels on the right, Space, 50 pixels on the bottom, which will make the article push away from the footer 50 pixels, and then we'll set 30 pixels on the left. And so now we can see this happening in here already. If I scroll up a little bit, everything in this article element now has 30 pixels on the right and left of padding. The article element itself is going the full width of the browser. The contents inside are now being pushed in 30 pixels from the right and from the left. So this is how we start to control that space. And since on the body element we set the margin and padding of the body to zero, this space is gonna be almost exact across a whole wide range of browsers, because we zeroed out the body, set the article so that it will be the full width, and then set the padding inside the article to a specific 30 pixels. It makes that much more consistent rendering across all the different browsers. Alright, so now let's come in and target our figure element. So this bigger element is housing not only our image but also our figure caption. And what I wanna do is size the image. And I wanna size the figure caption, and I want the type to go around it, I don't want this to be the center of the screen, here. I want it to sort of look... I want the layout to be a little bit nicer, I wanna be able to see the image, I wanna see the caption, and have the type go around it. So we're gonna use a couple of properties here to do that. So first, let's target the figure itself. So we can be really specific about the rule. So I can come in here and say article, Space, figure. And then we will only target figures inside of an article. Or if you only have one of these on your page, you can simply just type figure. So the level of specificity that you apply in your design just depends on how complex your design needs to be. If you have lots of figures inside of lots of elements, figures in asides, figures in main elements, figures in articles, you can be really specific on which particular figure you would like to target. So I'll leave this more specific. So we'll type article, Space, figure. So let's come in here and add some properties. So, border-left... We'll sort of style this like a call-out. We'll have a border on the left, and we'll space things out inside. So border-left, we're gonna set this to four pixels. That's gonna be the size. We're using shorthand style here as well, so, this goes, pixel, style, and color. So four pixels is the size. Solid is the style. And then a Space, and then we need to pick a color. And so we're gonna use the sort of gold color. So pound sign, we got f0 for red, bf for green, and 6f for blue. So that's gonna give us our border right here. And again, you have to keep on your matrix vision, and keep imagining that box model, because the figure element has a box, and then there's an image, and a fig caption, and we can have all of those in there. So next we're going to set some padding properties. So padding is on the inside of this. So we want zero on the top, zero on the right, zero on the bottom, and for the left, we're gonna set 15 pixels. Once I do that, we'll now get... These elements will now have 15 pixels between the left edge of that figure, and the elements that are inside of here. Next for the width, again, we're targeting the whole figure element itself, we're gonna set the width to 35%. So it's always going to be 35% of the width of the window. Gonna stop doing the figure for a moment, and let's come in here, and let's wrangle that image a little bit. So we're gonna type article, Space, figure, Space, img. Now we're being really specific. We only want images that are in a figure that are in the article. So this gives us, again, the ability to target specifically what we want. Let's come in here and set a width. We're gonna set this to 100%. So it'll always be 100% of the width of the parent. So notice as soon as I did that, without any width properties, the browser looks at the original PNG file, and says, wow, this thing's, like, 700 pixels, so it's just gonna render it really huge. But as soon as we give it a width property by saying 100%, the browser's now gonna size this to the width of the figure, which is set to 35%. This also means if I change the width of the browser, the size of the image is gonna change as well. Which is really cool, so we don't have to create all these different media queries, which we'll talk about in a few minutes. We can just use percentages to have everything adapt and change as we start working through. So on the image we're gonna do another cool thing here. We're gonna set a max width. And I'm gonna set this to 150 pixels. So this is a really cool idea, also. Up here, we said the width of the image can be 100%, which means 100% of the parent. Which means 35% of the width of the window, or the parent, which is the size of the figure. However, we can put a limit on this. So, basically what's happening here is, we're saying, you can grow to 100% of the width of the figure, but only until you get to be 150 pixels, which is really cool. So now if I come in here and resize this, the image is really, really tiny here, and then it'll get bigger and bigger, and then when it hits 150, it'll stop growing, which is really kinda cool. So if you have an image that you don't want displayed at a certain size, or, if someone has a 27 inch monitor, you don't want that image to be giant, so you can pick the maximum width, leave the minimum width to be dynamically-sized with the rest of the items on the page. So now we'll go back to the figure element inside of the article, and we'll set the text to be able to wrap. So again, matrix vision on with all of the box model properties. The paragraph goes the full width. The figure element, even though the width is only 35%, it's taking up that full width of the browser. Because the way HTML sees every one of these items is they each get a rectangle, and they just get rendered down the page. In order to change that, we need to use either positioning properties, which we'll talk about in our other class where we build a more complex layout, or we can use something called the float property. And float is kind of like setting a text wrap in a lot of popular graphic applications, allowing us to have the image sort of stick to a side, and allow content to go around it. So back in the article space figure, we set a width of 35%. Let's hit a Return, and let's come in here, and set a float property. So we're gonna set float, colon, Space, type in the word right, and then a semicolon. Excuse me. As soon as that's set into place, we now have the item floating over to the right-hand side of the screen, which means any available space is going to allow the text to go around that particular object here. And so this, again, alone, can be just a really powerful feature, so that we don't have to, again, create a lot of media queries, we can just get a lot of bang for our buck. We can set one property and have this content move around. And then to control the spacing around the figure, we'll come in here, and set a margin property. So for the top, notice that the top of this item is higher than the h2 for tumeric, here. In order to get that to move down, because it actually appears in the HTML before that heading, we can add a margin top property. So let's put 15 pixels on the top, we just wanna push that down a little bit. Then a Space. Zero on the right. Maybe 50 pixels on the bottom. And for the left, notice the line is jammed up right against the text, maybe we'll set 50 pixels on the left. Then add our semicolon. And so for the top, maybe make this a little bit more, maybe 25. Wow, maybe even, like, 40. As I add more margin top, I'm basically pushing this element down, so that it lines up a little bit better with the h2 tag. Now, nothing's gonna be perfect. We might see a couple pixel variation across browsers. But this will give us the ability to really start to take a little bit more control of that layout, and get those pieces in place. And then we can target the figure caption as well. So article in a new rule. Article, Space, figure, figcaption. Put in our brackets. We're gonna set text-align. We'll set this to left. We're gonna set the font size. We're gonna set this to be a little bit smaller than the paragraph type. So we're gonna do .9em, so it'll be just 10% smaller. We're gonna set a line height. We want to close up the letting a little bit, so we'll do 1.1em. And then we'll set the color to be just a little bit lighter, as well. So color, colon, Space, pound sign. We got a8 for red, 7d for green, and 38 for blue, and semicolon. So now we can zoom up on here, so, again... So now we can imagine what's creating all this layout. We've seen what it looks like in HTML with all the different pieces, but by using a float property, a border left, a little bit of padding on the figure, some colors, sizing the image, we really start to take that HTML that was just a long block of content running down the page, and just really starting to take control, and moving all this around. And just giving us the ability to go in there and just really start to change the way that content works.