This exercise incorporates using the margin property for center aligning page elements.
- [Female Instructor] Here's where we left our project. Let's add an update and put in some content wrappers to keep this text from spanning across the whole page, starting with the header. Let's switch over to our text editors. I'll use the Atom Autocomplete feature again to write the HTML a little faster. If I just type in the element name div, without the angled brackets and press Tab, it will complete it for me as well as add a class attribute. I'll add my class name, content wrap. But you can use any other descriptive name if you'd like. Make sure to put the div just inside of the header tag and close it just before the closing header tag. I'm going to indent this content in now that it is nested inside the content wrap. I'm using a div here because this container has no semantic meaning. We're just adding it for styling purposes. Let's go over to our CSS file and add in this content wrap style. We'll add it to our global section, since it's going to be reused throughout the page. Content wrap, open and close my curly brackets. The first thing we need to do is add a width. I'm going to give mine a value of 900 pixels. Then we'll add our margin. I don't want any space in the top and bottom of this container so I'll set it to zero. And then my left and right will be set to auto. Remember if we use zero as a value, we don't have to include a unit. Now let's save our file and check the changes in the browser. Refresh and there you go. Now the content block expands only to a width of 900 pixels and stays aligned in the center of the page, while the background color still spans all the way across. So before we fix up some spacing around these sections, let's just add the content wrapper to all the sections. In Atom and many other editors, there is this other feature called Code Collapsing. It's useful for temporarily hiding long blocks of code in your page to make the file easier to read. If I wanted to collapse some code in the projects area, I can just hover over the line number of any code block until I see this caret. Click to collapse to code and click to open it again. This is another good reason to make sure your code is organized, because the feature only works when the code is indented properly. So just like we did with the header area, make sure to add the content wrapper within the section but around the content. I'm just going to copy the opening div with the class to add to my other sections. So just after the opening work experience section and we'll make sure to indent this new content in. And add my closing div tag here. I just collapsed the code so I can make sure that the div is in the right spot. Okay, there is my opening content wrap and my closing, so all of this needs to be indented in once. And then, add it to my education and footer section. One last time. Okay, now let's save the file and check the page in the browser to make sure the content wrap has been added to all the sections. So I'm actually going to change the width to 800 pixels instead. I'd like my content wrap to be just a little bit narrower. Now, any block using this content wrap class will be updated. We created the content wrappers so the background color would continue to span all the way across. But as you can see, there's still some space around the edge of the page. That's actually coming from the body element. So, let's add a margin of zero to the body selector to remove that space. It's also convention to also set the padding to zero on the body, just to reset the default style of this element, since it wraps around all the content on the page. Now let's go back to the browser and check for this update. Now the space around the left and right is removed. However, we can still see some spaces between the sections, where the background colors don't cover. This content is also lined up right to the edge of it's containing elements. In the next exercise, we'll make some adjustments to the margin and padding to fix that.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts