The Box Model in CSS Web Design – Sec 4-8 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The student will: Be able to identify the difference between margin, border, and padding in CSS. Be able to add margins, borders, and paddings to HTML elements using CSS.

Units in CSS code Before you understand boxes in CSS code you need to understand measurements on a web page…

Understanding CSS Units of Measure Values can be expressed in absolute terms. For instance something can be declared to be an exact number of pixels (px) or points (pt). A pixel is one dot on the computer screen, and a point is equal to 1/72 of an inch, which is measure better suited for print documents than for computer screens.

Understanding CSS Units of Measure Values can also be declared in relative terms such as percent (%). For example, the font-size for the body might be set to 100%, which is the default font size in the user's browser. If the h1 font-size property is set to 180%, that's 80% larger than the rest of the body. One "em" is the size of the letter "M" in the user's current font. If you set a font size to 1.8em, that’s 1.8 times the default size

Understanding CSS Units of Measure % and em are relative because the default font varies from computer to computer. Relative values are generally better to use because they are scalable; they grow and shrink as needed to best fit given the user's screen resolution, window size, and default browser font size. If you use 12px to specify font size, that may look fine to most users on a computer screen, but it will be tiny on a high resolution cell phone!

The Box Model in CSS These are the layers in the Box Model: The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).

If you have this HMTL code: The Box Model in CSS If you have this HMTL code: <div> <p> This is a paragraph. It is a very short paragraph. </p> </div> And this CSS code: div { background-color: red; padding: 0; border: 1px solid black; margin: 0; } p { background-color: white; padding: 1em; border-width: 10px; border-style: solid; border-color: blue; margin: 10px !important; }

Tips You can specify one value for padding, border, or margin (for example, padding:5px), and that value will apply to all sides of the box. Alternatively, you specify a unique value for each side, such as padding-left, border-right, and margin-right. For padding and margin, you can use shorthand by specifying each of the four sides in a single style declaration, like this: padding: 1em 1.5em 5% 10px; The four values are for the top, right, bottom, and left (clockwise around the box, starting at the top)

Borders can also be specified using shorthand, like this: border: 1px solid black; These three values represent the border-width, border-style, and border-color. Border styles are:

Finish adding fonts into your CSS code. Turn in the font worksheet. Rest of Today Finish adding fonts into your CSS code. Turn in the font worksheet. Download the instructions for today. Add borders, margins and paddings. Add CSS code to stylize the table in your accesibility.hmtl file.