Subtitles of the Movie

In this movie we continue to add in our margins to our project. So let's go ahead and pick up where we left off. I'll jump back into my CSS here and I'll go ahead and scroll on down to my Content because we want to add in a margin here so type in Margin Left and 11m and I'll go ahead and save that and just refresh in the browser here and we go to scroll on down a bit so we can see that. So I can see that it moved over to the right a good bit. Next I'm going to add in rules to control our News section followed by the Tutorial section and then the Footer. So first the News; so the News as a whole is going to end up getting its own margin and I'll set the margin to ten pixels all the way around and then for my News H2 I'm going to add in a margin here of negative .3m. So I'm going to go ahead and set that margin and we're going to see why we want to set that margin in just a moment here. So I'm going to do my Margin Right and I'll set that margin right up to 20 percent. So that's going to be a scaling right margin so it's going to be moving with the browser window. Then I'm going to set up my Tutorials and the Tutorials will have a Margin Bottom set to 10px. Then we follow the Tutorials there with our Tutorials H2 and this will also receive our margin of negative .3m and it will have a Margin Top of negative ,.4m. Now, the reason that we have both of our H2s set up this way is because let me go ahead and save and jump over so that we can see this now. Whenever I refresh, all of our different margin settings are going to go into play, especially the one right here. So if I refresh, what will happen is it will make it so that our Content is butting up to the edge of our parent container. So by using a negative margin, we can actually make things flush so that's actually pretty cool. However, if you notice, it's also done some things here. We'll have to take that into consideration whenever we get done here. We also notice that there's a margin down here at the bottom. So I'm going to go back in here and continue to work by adding in some margins to the Tutorial class and the Footer. So next is the Tutorial class and the Tutorial class will have a margin on the top of negative five pixels and then we go ahead and scroll on down here to the Footer and the Footer is going to have a Margin Top of negative 1m. So go ahead and save that and take a look at what's going to happen over here. So go ahead and scroll on down a bit. So our Tutorial class is going to move up negative five pixels, so we're going to decrease the amount of space that's between these two elements and then our Footer is going to move up to the top here. So I'll go ahead and refresh and we see those two things take effect. And as you can see, we now have our design starting to kind of take shape and we will manipulate that quite a bit more in our upcoming movies. Now, that concludes our look at Margin Properties and with it we draw to a close our look at all of the different aspects of our Box Model. At this point we should have a strong grasp over the bulk of what makes CSS so powerful but, of course, there's more that awaits us along this journey.