Lesson 2: Applying the Box Model in CSS

Overview

In the previous lesson you learned about the layers that form a "box" in the CSS box model, namely padding, border, and margin. In the current lesson, you will have the opportunity to apply what you learned to your web portfolio.

Learner Outcomes

At the completion of this exercise:

• you will be able to add margins, borders, and paddings to HTML elements using CSS.

Activities

1. Open your web portfolio's external style sheet in a text editor, and its home page in a browser.
2. If you haven't already added a margin to your body in previous lessons, do so now. Set both the margin-left and margin-right properties to 10%.
3. Add padding, border, margin, color, background-color, and width properties to the following elements:
   • body
   • div
   • h1
   • h2
   • p
   • ul
   • li
4. Play with a variety of properties using the W3School CSS Reference as a guide.
5. If you're using a current browser, try some of the especially cool CSS3 properties, such as border-radius and box-shadow.
6. Each time you add or change a property, save the file and refresh your browser to see what effect the change had on your home page.
7. When you are satisfied with the new look of your home page, open the file accessibility.html, which you created in the lesson on Creating a Data Table. Currently your data table probably doesn't look very interesting. Try adding style definitions to your style sheet that effect the way the table is displayed. You can stylize all of the elements that comprise the table (including table, th, td, and caption. Each of these elements is a box, so you can change the way it looks by playing with the padding, border, and margin properties for each of these elements.

Handouts/Online Documents

• W3School CSS Reference

All done?

After you are satisfied with the new look of your website, especially index.html and accessibility.html, show these pages to your instructor before proceeding to the next module.