Teach the Web

Exercise 3 Overview

Explore the box model through the following exercises.

Part A

Create a document called 3_exercise.html.

Read this article and follow the steps in your document.

Look at your page in the browser after each step.

Notice how things change.

Understand the Box Model.

Part B

Read the following sites to learn more about the Box Model.

• Basic CSS Box Model Demo
• Box Model
• The Box Model
• 3D CSS Box Model
• Margins and Padding
• CSS Borders

Part C

Read the information about Firebug and CSS layout.

Install Firebug in Firefox.

Go to various websites and look at how the Box Model is in use.