1 / 11

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: B e able to identify the difference between margin, border, and padding in CSS .

zeroun
Download Presentation

The Box Model in CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 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

  2. 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.

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

  4. 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.

  5. 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

  6. 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!

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

  8. 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; }

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

  10. 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:

  11. 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.

More Related