The Box Model in CSS

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 Modelin 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).

The Box Model in CSS p { background-color: white; padding: 1em; border-width: 10px; border-style: solid; border-color: blue; margin: 10px !important; } 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; }

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:

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.

The Box Model in CSS