Lecture_6_CSS Box Model & Layout Basics

Objective: Learn how the CSS box model works and apply it to layout elements on the page.

• Duration: 80 minutes

• Topics Covered:

  1. The CSS Box Model

     • Explanation of content, padding, border, and margin.

     • How the box model affects the layout.

  2. CSS Margins & Padding

     • Difference between margins and padding.

     • Individual side control (margin-top, padding-left, etc.).

     • Margin and padding shortcuts.

  3. Borders & Outlines

     • Adding borders and outlines to elements.

     • Border styles (solid, dashed, dotted).

  4. Width, Height, and Overflow

     • Setting width and height properties.

     • Controlling content overflow.

• Student Activity:

  • Create a content box with a heading, paragraph, and image. Apply padding, margins, and borders to each element. Experiment with different border styles and content overflow settings.

• Homework/Practice:

  • Create a card layout using the box model. Ensure consistent padding, margins, and border usage.