Module 4: The Box Model in CSS

Overview

In this module, students will learn about the CSS box model. Understanding the box model will enable students to have greater control over the appearance of their content. By adding padding, margin, and borders to sections of their web page students' portfolios can begin to take shape as aesthetically pleasing, professional-looking pages.

Lesson 1: Understanding The Box Model in CSS

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• CSS units of measure (e.g., em, %, and px) play an important role in this lesson. Students were first exposed to these units of measure in the first lesson of this CSS unit. It might be helpful in the context of this lesson to review the differences between these units.

Lesson 2: Applying the Box Model in CSS

• Estimated time required: 90+ minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• This lesson consists of two distinct phases. First, students stylize their home page by making changes to their external CSS file. Second, students apply styles to the data table on their Accessibility page. You may want to break these phases into two distinct lessons.
• The latter of these two phases (stylizing a data table) can be difficult for some students. Optionally, this activity could be presented as a challenge for advanced students, but students who are feeling overwhelmed or getting behind could be invited to copy and paste CSS code. The example Accessibility page demonstrates one approach to stylizing a data table, and the CSS that's used to attain that style is provided at the bottom of the example external CSS file. If you choose to provide this code for students you should discuss it as a class to be sure students understand how it works. Then they can tweak the styles to reflect their own tastes and goals.
• Consider allowing students to copy and paste styles for the first phase of this lesson as well. Doing so helps to reduce the amount of typing/coding that's required for this lesson. Even professional web developers copy existing code in order to reduce development time. However, in this context efficiency needs to be balanced with student learning, and you might feel that typing all the code helps to reinforce learning.
• By the end of this lesson students' websites are likely to be taking on new, distinct looks from one another. This is a good opportunity to have a "gallery walk" in which students are able to sample each others' work and learn from each other.

Example Output

When this lesson is complete, students will have applied box model CSS properties to their site, which should be visible in index.html and accessibility.html.