Box Model Basics

Objectives

At the end of this lesson, you will be able to:

• Apply the CSS box model to position and size XHTML elements

Instructions

Instructions: Use document-level styling to create the following pages.

Practice A

1. Make a red div that is 100% wide and 50 pixels tall.
2. Under that, make a white div that is 100% wide and 300 pixels tall.
3. Under that, make a blue div that is 100% wide and 100 pixels tall.
4. Name your file practice_a.html

Practice B

1. Make the background of the page gray.
2. Make a div that is 100 pixels from the top of the window and 50 pixels from the left of the window.
3. The div should be 400 pixels wide.
4. The background of the div should be yellow.
5. Place the following text inside the div:Good record keeping will help you maintain your budget. Set aside an hour each week to work on your budget. Try to keep your budget relatively simple so that it works for you. Too much detail can make your budget unmanageable. Put items in a category since if you combine too many expenses under miscellaneous, you will find it difficult to plan your expenses.
6. Name your file practice_b.html.

Practice C

1. Download any public domain or Creative Commons image you’d like from Google Images.
2. Place the image 150 pixels from the top of the window and 100 pixels from the right side of the window.
3. Place a red border that is 5 pixels wide and dotted around the image.
4. Name your file practice_c.html.

Practice D

1. Place an image at the top of your webpage.
2. Place the following sentence 100 pixels below the image and 50 pixels from the left of the window:US High Schools Serve Grades 9 – 12.

Screenshot

More screenshots and source code for this project are available when you purchase the curriculum.

Rubric

Notes

The PADDING is the distance between the content of the box and the box’s border
padding-top:
padding-bottom:
padding-left:
padding-right:

The BORDER is a visible line between the PADDING and the MARGIN.
border-top:
border-bottom:
border-left:
border-right:

The MARGIN is the area AROUND (outside of) the box
margin-top:
margin-bottom:
margin-left:
margin-right:

Image Copyright (C) 1997 World Wide Web Consortium. All rights reserved. Used with permission.