Skip Navigation Links

CS115 CSS & JavaScript (Web Publishing 2)

Section 5 - Box Properties


All the box properties.

  1. Section overview and introduction (Redo and add importance of meta tag to force IE to std modeVideo 5a1)
  2. Everything has a box and how to view it (Video 5b1)
  3. Box borders
    1. The border-style property (Video 5c1)
    2. Different borders on different sides with the border-side-style properties (Video 5c2)
    3. The border-style shortcut property. 1 value, 2 values, 3 values and 4 values. (Video 5c3)
    4. The border-width property (Video 5d1)
    5. The border-side-width property and border-width shortcut (Video 5d2)
    6. The border-color property (Video 5e1)
    7. The border-side-color property and border-color shortcut (Video 5e2)
    8. The border super shortcut (Video 5f1)
  4. Box padding
    1. The padding property - space inside the box between the border and the box content (Video 5g1)
    2. The padding-side properties and padding shortcut (Video 5g2)
    3. Indenting text with padding (Video 5g3)
  5. Box margin
    1. The margin property - space outside the box between the box and any adjacent objects (Video 5h1)
    2. The margin-side properties and margin shortcut (Video 5h2)
    3. Changing box position by adjusting the margin and negative left margins (Video 5h3)
    4. Advanced - Calculating horizontal margins (Video 5h4)
    5. Advanced - Collapsing vertical margins (Video 5h5)
    6. Margin usage example 1 (Video 5h6)
    7. Margin usage example 2 - space between headings (Video 5h7)
    8. Margin usage example 3 - list marker area (Video 5h8)
    9. Margin usage example 4 - the auto value and centering a box (Video 5h9)
  6. The outline property (Video 5i1)
  7. Box size (height and width)
    1. Basics of height and width, and the width and height properties (Add default width is 100%Video 5j1)
    2. Advanced - Width Calculation Details 1. What does width include? (Add meta tag to force IE to std modeVideo 5j2)
    3. Advanced - Width Calculation Details 2. Converting to pixels. (Video 5j2)
    4. Height basics (Video 5k1)
    5. Containing block concept and percentage height (Video 5k2)
    6. Handling overflow when you set the height (Video 5k3)
    7. CSS3 handling overflow in x and y directions with overflow-x and overflow-y (Video 5k4)
    8. Variable widths with min-width and max-width. This is important for layout (Video 5l1)
    9. Letting the width vary, but constraining it with min-width and max-width. This is important for layout (Video 5l2)
    10. The min-height and max-height properties (Video 5l3)
  8. Boxes around inline elements (Video 5m1)
  9. An example of using box properties to create a basic wireframe (Need Videos)
    1. Creating the wrapper, the width calculation , height and centering (Video)
    2. The wrapper height and centering (Video)
    3. Creating the main heading, where to set the font size (Video)
    4. Setting padding on the main heading (Video)
    5. Creating and styling the top level menu bar (Video)
    6. Moving the menu bar down (Video)
    7. Removing space between menu items by adjusting the margins (Video)
    8. Creating the main content area (Video)
    9. Creating the sidebar area (Video)
    10. Creating the footer area (Video)