Information Sheet 16

Quarter 2 – Week 16
Subject Area: IT: SS1 - HTML5, CSS3

I. Unit of Lesson: CSS Box Model

I. Learning Objectives:

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

 Understand the different properties used in styling CSS Box Model
 Explain how to create a Box Model using the properties
 Designing and styling box model

II. Module Overview

In this module, we will discuss the CSS Box Model

III. Lesson Content:

What is Box Model?

• CSS box model typically describes how these rectangular
boxes are laid out on a web page.
• Every box has a content area and optional surrounding
padding, border, and margin areas.

• The following diagram demonstrates how the width, height, padding, border, and
margin CSS properties determines how much space an element can take on a
web page.

Width and Height of the Elements

• Usually when you set the width and height of an element using the CSS width
and height properties.
• In reality you are only setting the width and height of the content area of that
element.
CSS Padding Properties
• The CSS padding properties allow you to set the spacing between the content of
an element and its border (or the edge of the element's box, if it has no defined
border).

Define Paddings for Individual Sides

• You can specify the paddings for the individual sides of an element such as: top,
right, bottom, and left sides.
• By using the CSS padding-top, padding-right, padding-bottom, and the padding-
left properties, respectively.

The Padding Shorthand Property

• The padding property is a shorthand property to avoid setting padding of each

side separately
• padding-top, padding-right, padding-bottom and padding-left
CSS Border Properties

• The CSS border properties allow you to define the border area of an element's
box.
• The border can either be a predefined style like, solid line, dotted line, double
line, etc. or an image.

Understanding the Different Border Styles

• The CSS border properties allow you to define the border area of an element's
box.
• The border can either be a predefined style like, solid line, dotted line, double
line, etc. or an image.

The border-style property sets the style of a box's border such as:

• None
• hidden
• solid
• dashed
• dotted
• double
• inset
• outset
• groove
• ridge

Setting the Border Width and Color

Tip: The border width can be specified using any length value, such as px, em, rem,
and so on. In addition to length units, the border width may also be specified using one
of three keywords: thin, medium, and thick. Percentage values are not allowed.

Note: The CSS border-width or border-color property does not work if it is used alone.

Use the border-style property to set the style of the border first.
The Border Shorthand Property

CSS Margin Properties

• You can specify the margins for the individual sides of an element such as top,
right, bottom, and left sides.
• Using the CSS margin-top, margin-right, margin-bottom, and the margin-left
properties, respectively.

The Margin Shorthand Property

• The margin property is a shorthand property to avoid setting margin of each side
separately
• margin-top, margin-right, margin-bottom and margin-left.

Horizontal Centering with Auto Margins

• The auto value for the margin property tells the web browser to automatically
calculate the margin.
• This is commonly used to center an element horizontally within a larger
container.
 Performance Task Sheet 16
Title:
CSS Box Model

Performance Objective:
• Putting a box model

Supplies:
LMS, online course site
Equipment:
Computer, internet connection
Steps/ Procedures:
 Put a box model inside your paragraph, div , span etc.

 Style it using CSS

 Put background color and borders.

 adjust the text margin and padding inside the box

Assessment Method:

Portfolio Assessment, Performance Criteria Checklist