Author: saqibkhan

Flexbox makes aligning and distributing space between items easy.

Basic properties:

• display: flex – enables flexbox
• flex-direction: row or column
• justify-content – controls horizontal alignment
• align-items – controls vertical alignment

Example:

<style>
.container {
  display: flex;
  justify-content: space-between;
  background: lightgray;
}
.item {
  background: coral;
  padding: 10px;
}
</style>

<div class="container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
</div>

Practice Task:
Create a horizontal navigation bar using Flexbox.

The display property determines how an element behaves:

• block – takes full width, starts on a new line
• inline – takes only the space it needs, stays in the same line
• inline-block – behaves like inline but allows setting width and height
• none – hides the element

Example:

<style>
span {
  display: block;
  background: lightgreen;
  margin: 5px;
}
</style>

<span>Block 1</span>
<span>Block 2</span>

Practice Task:
Create an inline navigation menu and then switch it to block layout.

Float is used to push elements to the left or right, allowing text to wrap around them.

Example:

<style>
img {
  float: left;
  margin: 10px;
}
</style>

<img src="https://via.placeholder.com/150">
<p>Lorem ipsum text wrapping around floated image...</p>

The clear property resets float so other elements do not wrap around it.

Practice Task:
Create a two-column layout using float and clear, with a sidebar on the left and content on the right.

The position property controls how an element is placed on the page. Types include:

• static – default position, follows normal flow
• relative – positioned relative to its normal position
• absolute – positioned relative to the nearest positioned ancestor
• fixed – stays fixed relative to the viewport
• sticky – behaves like relative until a scroll threshold is reached, then it sticks

Example:

<style>
.parent {
  position: relative;
  background: lightgray;
  height: 200px;
}
.child {
  position: absolute;
  top: 50px;
  right: 20px;
  background: coral;
  padding: 10px;
}
</style>

<div class="parent">
  Parent Div
  <div class="child">Absolutely Positioned Box</div>
</div>

Practice Task:
Create a sticky navigation bar that stays at the top when you scroll.

Every HTML element is essentially a rectangular box made up of four layers:

1. Content – text or image inside the box
2. Padding – space between content and border
3. Border – the edge around the box
4. Margin – space outside the border, separating it from other elements

Example:

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  margin: 15px;
  background-color: lightyellow;
}
</style>

<div class="box">This is a box model example.</div>

The total width of the element = content width + left/right padding + left/right border + left/right margin.

Practice Task:
Create a card with padding, border, margin, and border-radius to understand spacing visually.

Layouts are the foundation of every website. They define how elements are arranged on a page, how users navigate, and how the design adapts to different screen sizes.

CSS provides several ways to control layouts:

• Normal Flow – default arrangement (top to bottom)
• Floats – used for sidebars and image wrapping
• Positioning – precise placement of elements
• Flexbox – a one-dimensional layout system (row or column)
• CSS Grid – a two-dimensional layout system (rows and columns)

Example – Normal Flow:

<style>
div {
  background: lightblue;
  margin: 10px;
  padding: 20px;
}
</style>

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

All boxes will be stacked vertically by default.

Practice Task:
Create a simple page with a header, content, and footer. First, see how they look without CSS (normal flow), then try using Flexbox to arrange them horizontally.