The CSS box model properties are used for sizing and spacing elements. Explore how to apply the box model concepts to your projects.
- [Instructor] Let's update our projects by adding in the content wrappers. To keep the text from spanning across the whole page, starting with the header. Make sure to put the div just inside of the header tag. We want to make sure we enclose all of the content, but stay within the sections. So as a side note, in the Atom editor, there's actually an auto complete feature for writing HTML. If I was just to type div and press tab, it'll actually just complete it for me. So just a little shortcut if you're using the Atom editor.
I'm going to name my class content wrap. And make sure that this closing div closes just before the closing header tag. Just to keep the content within this content wrap container. So let's go back to the CSS now and add in this style in the global section. We're going to keep this style here in the global section, because it's going to be reused throughout the project. So I'll add my content wrap class here, give it a width, we're going to give it a width of 950 pixels.
And then add the margin, zero for the top and the bottom, and auto for left and right. Now the content block should only expand to the width of 950. Let's save this file and check it out in the browser. Okay so now my content is center lined to a maximum width of 950. The background color still spans across the page. Let's go back to our HTML and add that content wrapper to the rest of the page.
So we should add one here in the work section. We'll do the same thing and make sure that the closing tag encloses around the content. So it should be right before this closing section tag. Same goes for the education section.
And also make sure you keep your HTML indented properly so that you can easily see where your opening and closing tags are. We have one more. Let's add it to the footer. Okay fix the indentation and spacing and we're good to go. Save your page, check it in the browser. So that's the great thing about using classes, is we've declared it once, but now we're able to apply it to multiple parts of the page, just by using the same class name.
Now if you wanted to change the width, you can update it in the content wrap declaration block and it will be applied to all of these sections. Now, if the browser is wider than 950 pixels, the content stays in the middle of the page. But if it's smaller than 950 pixels, you'll see this horizontal scroll bar at the bottom, and it's there so that you can scroll over to see the content that doesn't fit on the page. But now the background styles don't extend all the way across.
That's because the width of the content wrap is fixed, so it extends to the fixed width value, rather than the browser window width, The background styles are in the containing element, which by default is the same as the browser width, not the content wrap. So to make the content wrapper flexible, but while still setting the width on the content, instead of using a width, we can use max width instead. Let's go back to our CSS file and make that update.
So let's change this to max dash width, save it and go back to the browser, and let's test to see what the difference is. So when the browser is larger than 950, it'll look the same as it did before, but the big change is when it goes to smaller than 950, it becomes by default a hundred percent of it's container. So that horizontal scroll bar no longer appears. So by using max width, what we're saying is if the value of the width of the browser window is less than 950, it equals a hundred percent, but it maxes out at 950.
So our page is now flexible, but we still have some control over the sizing of this content wrap. There will be times when components need to be a specific size, but people are now browsing on many different screens sizes, so you want to try to make your page as flexible as you can. In this course we'll mainly focus on learning how to write CSS for desktop and laptop computers as a starting point, but making your CSS fluid from the start will help with optimizing your webpages for all devices.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property