Subtitles of the Movie

In this movie we conclude our Rounded Corners by adding in the CSS that will control our classes. So I'm going to go ahead and jump into the CSS here and move on down to where we had defined our classes, down at the bottom, and I'm going to add in my classes here for the outerBox, innerBox, and the firstItem. So first I'll do my outerBox, and I'll set that up with a padding at the bottom of 5px, and of course, whenever you're first setting this up you may not know how much padding you'll need, it depends on how large your graphic is and what other elements are surrounding your specific items. So then I'll go ahead and add in my background here and the background that I will use is again in the images folder and I've got a folder set up in there called boxes, and this is going to be our bottom-right.gif. Then I'm going to position it to the right-bottom of our region and I do not want it to repeat. So, I'll go ahead and save that and then jump over and Refresh my page and I see the right-bottom show up here and it is lining up appropriately, then I'll jump back in here and set up my innerBox and save myself some typing, I'll just copy that, and I'm going to change the innerBox and then I need to change my padding to top. I'll go ahead and copy that too because I need to set up a declaration for the padding to the left. That's also going to be 5 pixels, and then the image I'm going to use here for my innerBox is going to be top-left and I want that to be to the top and to the left. Also it will not repeat. I'll go ahead and save that, and then jump back in here and Refresh and as you can see we now have the top showing up here, and then I jump back in here and I need to set this up for the firstItem, and the firstItem is going to have some of the same properties here. I'll go ahead and copy that, paste it in, and then change the padding-left here because I do need a padding to the top. This time I need a margin on the top, and actually I need to remove the margin and then change the image that it's using to the top-right, and then change the position to top-right. I'll go ahead and save that and jump back over into my browser and Refresh, and you see how it pulls in that Rounded Corner to the upper right-hand corner. Now the last thing I need to do here is add in an image to my About, so I'm going to go ahead and find my about, there it is. I'll do my background, URL, and again using images inside of the boxes I will use the bottom-left.gif, and position that to the left-bottom with no-repeat. I'll go ahead and save that and jump back in here and Refresh, and there we go, beautiful, Rounded Corners. Now that we have the rules set up appropriately all we have to do to add our Rounded Corners to our Tip of the Week and our Related Links is add in the appropriate structure. So I'm going to go ahead and just jump into my HTML here and go to the Related here. I'm actually just going to go ahead and copy the outer and inner divs and put that right inside of the related Div, there we go, and then jump down and close out those divs appropriately and I'm going to go ahead and add that in for the Tip of the Week as well, so I'll go inside of my tip and it looks like I actually had a typo right there. I'll go ahead and put in those divs and then close the divs appropriately and then the last thing to add in is the firstItem class to the firstItem in our regions, so I'll just copy that and I'll add that to the H2 in the tip, and then the H2 in our related. So there we go, I'll go ahead and save that and then jump back into my browser and Refresh. So now we have the structure for most of our content, however, I need to add in that background for our Tip as well as the Related, so I need to go back into my CSS and I'm just going to copy this background here and I'm going to add it to the tip section and then add it to the related. I'll go ahead and save my CSS, jump back into my browser and hit Refresh and there we go. Perfect, Rounded Corners. So that concludes this movie on how to put in your Rounded Corners. It also concludes our look at using CSS with Images.