Box Model

Every element on the page has its own box, which can be styled using CSS.

From the inside out:

  1. content
  2. padding
  3. border
  4. margin

Background

Keep in mind that a background will cover the content and the padding.

Together

  1. Give the h1 a red background, some padding, and a black border.
  2. Give every p a blue background, white text, some padding, and a black border.
  3. Give every code element a white background, black text, a little padding, and a thin border.

Now You Try

  1. Try adding styles for the h2s, ols, and lis on this page.
  2. Look into the syntax for margin and try adding more space around elements by using them.