Complete Web Designing Course for Beginners

MODULE 4 – CSS Layout & Design

📐 Lesson 4.3 – Width & Height

🎨 Controlling the Size of HTML Elements Using CSS

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Width and Height

✅ Control Element Dimensions

✅ Use Pixels (px)

✅ Use Percentages (%)

✅ Understand Responsive Sizing

✅ Create Proper Layout Structures

✅ Build Professional Website Sections

📖 Introduction

Imagine creating a webpage with a box.

Without width and height:

+------------------+
| Hello Students   |
+------------------+

The browser decides the size.

Now imagine:

+----------------------------------+
|                                  |
|      Hello Students              |
|                                  |
+----------------------------------+

You control the size.

This is done using:

📐 Width & Height

🤔 What is Width?

Width controls:

Horizontal Size

of an element.

Example:

width:300px;

Meaning:

Element Width = 300 Pixels

🤔 What is Height?

Height controls:

Vertical Size

of an element.

Example:

height:200px;

Meaning:

Element Height = 200 Pixels

🌟 Width Property

Syntax:

width:value;

Example

div{

width:300px;

}

Result

Box width becomes 300 pixels.

🌟 Height Property

Syntax:

height:value;

Example

div{

height:200px;

}

Result

Box height becomes 200 pixels.

🎯 First Width & Height Example

HTML

<div>

Learning CSS Width & Height

</div>

CSS

div{

width:300px;

height:150px;

background-color:lightblue;

}

Output

A light blue box.

Width = 300px

Height = 150px

🌟 Understanding Pixels (px)

Pixel is the most common unit.

Example:

width:100px;

Small width.

width:300px;

Medium width.

width:600px;

Large width.

Example

div{

width:400px;

height:200px;

}

🌟 Width Using Percentage (%)

Instead of fixed size, we can use percentages.

Example

width:50%;

Meaning:

Use 50% of parent width

Example

div{

width:50%;

}

Result

Box occupies half the available width.

More Examples

width:25%;

25% width

width:75%;

75% width

width:100%;

Full width

🎯 Why Percentage is Important?

Pixels:

width:500px;

Fixed size.

Percentage:

width:100%;

Responsive size.

Works better on:

📱 Mobile

💻 Laptop

🖥️ Desktop

🌟 Auto Width

By default:

width:auto;

Meaning:

Browser automatically decides width.

Example

div{

width:auto;

}

🎯 Height Example

height:100px;

Small height.

height:300px;

Large height.

Example

div{

height:250px;

background-color:yellow;

}

Result

Tall yellow box.

🌟 Width + Height Together

Example

div{

width:400px;

height:200px;

background-color:lightgreen;

}

Result

Custom size box.

🎯 Centering a Fixed Width Box

Example

div{

width:400px;

margin:auto;

}

Result

Box appears in center.

🌟 Creating Website Sections

Website Header

header{

width:100%;

height:100px;

}

Banner Section

section{

width:100%;

height:400px;

}

Footer

footer{

width:100%;

height:80px;

}

🌟 Min Width

Defines minimum width.

Example:

min-width:300px;

Meaning:

Width cannot become smaller than 300px

🌟 Max Width

Defines maximum width.

Example:

max-width:800px;

Meaning:

Width cannot exceed 800px

Example

div{

width:100%;

max-width:800px;

}

Result

Responsive layout.

🌟 Min Height

Example

min-height:200px;

Meaning

Height will never be less than 200px

🌟 Max Height

Example

max-height:500px;

Meaning

Height cannot exceed 500px

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="box">

Welcome to NextGen Dev Hub

</div>

</body>

</html>

CSS

.box{

width:400px;

height:200px;

background-color:lightblue;

border:2px solid blue;

margin:auto;

padding:20px;

font-size:22px;

}

🎯 Expected Output

A centered blue box containing:

Welcome to NextGen Dev Hub

with:

✅ Width = 400px

✅ Height = 200px

✅ Border

✅ Padding

🏫 Real World Examples

Website Header

header{

height:80px;
}

Hero Section

.hero{

height:500px;
}

Profile Card

.card{

width:350px;
}

Image Gallery

img{

width:100%;
}

⚠️ Common Beginner Mistakes

Mistake 1

Using Very Large Width

Wrong:

width:3000px;

Creates horizontal scrolling.

Mistake 2

Using Fixed Width Everywhere

Wrong:

width:800px;

May break on mobile.

Prefer:

width:100%;

max-width:800px;

Mistake 3

Forgetting Height

Some layouts need height.

🌟 Best Practices

✅ Use percentages for responsive layouts.

✅ Use max-width for professional websites.

✅ Avoid excessive fixed widths.

✅ Use margin:auto for centering.

✅ Test layouts on different screen sizes.

🏆 Mini Project – Student Information Panel

Create:

Student Name

College Name

Branch

Skills

Inside a box.

Apply:

width:400px;

height:250px;

margin:auto;

padding:20px;

📝 Practical Activity

Create three boxes.

Small Box

width:200px;

height:100px;

Medium Box

width:400px;

height:200px;

Large Box

width:600px;

height:300px;

Observe the differences.

📋 Assignment

Assignment 4.3

What is Width?
What is Height?
What is the difference between px and %?
What is max-width?
What is min-height?
Create a box with width 400px and height 200px.
Create a responsive box using percentage width.

🧠 Quiz

Q1. Which property controls horizontal size?

A. height

B. width

C. size

D. length

✅ Answer: B

Q2. Which property controls vertical size?

A. height

B. width

C. size

D. length

✅ Answer: A

Q3. Which unit creates responsive sizing?

A. px

B. pt

C. %

D. cm

✅ Answer: C

Q4. Which property limits maximum width?

A. min-width

B. max-width

C. width-limit

D. width-max

✅ Answer: B

Q5. Which property centers a fixed-width element?

A. center

B. text-align:center

C. margin:auto

D. align:center

✅ Answer: C

📌 Lesson Summary

✅ Width controls horizontal size.

✅ Height controls vertical size.

✅ Pixels provide fixed dimensions.

✅ Percentages provide responsive dimensions.

✅ max-width and min-width help create flexible layouts.

✅ Width and height are essential for professional website design.