Assignment 9 — Understanding the Box Model

Description:

HTML provides padding, margin, and border CSS properties to fine tune the way that elements appear. These elements allow you to indent elements, provide white space around elements, and draw lines around elements. This week, you'll learn about the HTML box model and the difference between the margin, border, and padding properties.

The following image from the W3C web site illustrates the box model.

To control space on the page, you have three different properties:

  • The content is where your actual content for the element resides.
  • The padding creates visual space round the content (and between the content and the border).
  • The border provides a visual indicator that separates the content (and padding) from the margin.
  • The margin provides the white space between the current element and the ones around it.

For example, if you wanted to specify 10-pixel padding around a paragraph, you could specify:

p {padding: 10px;}

You can specify the top, right, bottom, and left, versions of the margin, border, and padding properties separately. For example, if you wanted to specify only a left margin for paragraphs, you could specify:

p {margin-left: 10px;}

A border allows you to draw lines around the current content. When specifying a border, you need to specify the style of the border (for example, solid or dashed) and the width of the border (usually in pixels). You can specify the width of the line. For example, to draw a 1-pixel border around a paragraph, you could specify:

p {border-style: solid; border-width: 1px;}

You probably will want to use these properties in different combinations. For example, to include a border above and below a paragraph and to add space between the border and the content of the element, you would use a combination of padding and borders and shown in the following example:

p {
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-top: 10px;
  padding bottom:10px;}

For more information, see Chapter 9 of the Head First HTML and CSS book.

CSS properties:
border padding background margin
Videos: Understanding the Box Model

Tasks:
  1. Read and complete the exercises from Chapter 9 of the Head First HTML and CSS book.
  2. Create a folder named Chapter9.
  3. In your Chapter9 folder, create your customized versions of the following files.
    • lounge.html
    • lounge.css
    • directions.html
    • elixir.html
    • lounge-print.css
    • minimum of five images

    Duplicate the folder structure described in the book.

  4. Ensure that all of your links work correctly and display the appropriate file when clicked.
  5. Validate each of the HTML pages at https://validator.w3.org/. Fix any errors that occur.
  6. Upload the contents of your Chapter9 folder to your website.
  7. Zip your Chapter9 folder and name the file yourName_chapter9.zip.
  8. Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.
Grading criteria:

Your assignment should demonstrate:

  • Revising the files from Assigment 7 to include additional text, headings, bullet lists, and images so your main web page is organized similarly to the one in the book.
  • Defining a CSS style rule to adjust line-height.
  • Defining CSS style rules to adjust the font-size of headers.
  • Defining CSS style rules to create a colored box of text, including setting margins, setting padding, defining border styles, setting a background color, and adding a background image.
  • Using an id attribute to define a style.
  • Creating a media style sheet.
  • Validating your HTML and CSS files and correcting any errors.
  • Uploading the files to your web site.
Due:

By 11/13

Example assignment:

Chapter 9 example