Lecture Notes Of Class 7: Width and Height
Objective:
- Understand
and manage the width and height of HTML elements, including setting fixed
dimensions and constraining them using max-width and max-height.
Topics:
1. width:
o
The width property specifies the width of an
element.
o
You can set it to any valid CSS length (e.g.,
pixels, percentages, or viewport units).
css
Copy code
div {
width: 300px;
}
2. height:
o
The height property defines the height of an
element.
o
Like width, it can be set using values like pixels,
percentages, or viewport units.
css
Copy code
div {
height: 200px;
}
3. max-width:
o
The max-width property specifies the maximum width
an element can have.
o
The element will not expand beyond the set maximum,
but it can still shrink if necessary.
css
Copy code
div {
max-width: 500px;
width: 100%;
}
o
In this example, the element will be as wide as the
container, but it will never exceed 500px.
4. max-height:
o
The max-height property defines the maximum height
an element can have.
o
Similar to max-width, it limits the height but
allows the element to shrink if required.
css
Copy code
div {
max-height: 300px;
height: auto;
}
Lab
Exercise:
Task:
Create responsive boxes with constrained dimensions
1. HTML
Structure:
o
Create three div elements to represent the boxes.
o
Add some text inside each div for demonstration.
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Boxes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box box1">
Box 1
</div>
<div class="box box2">
Box 2
</div>
<div class="box box3">
Box 3
</div>
</body>
</html>
2. CSS
Styling:
o
Use the width, height, max-width, and max-height
properties to create responsive boxes.
o
Set the background color and padding to make them
visually distinct.
css
Copy code
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.box {
width: 100%;
max-width: 300px; /* Constrains the width */
height: 200px; /* Fixed height */
max-height: 250px; /* Constrains the height
*/
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
box-sizing: border-box;
padding: 20px;
}
/*
Different background colors for each box */
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #e74c3c;
}
.box3 {
background-color: #2ecc71;
}
@media
screen and (max-width: 600px) {
.box {
max-width: 100%; /* Make boxes fill the
screen on smaller devices */
}
}
Explanation:
- The .box
class defines common properties for all boxes: a flexible width (with a
maximum constraint) and a fixed height, with rounded corners for better
aesthetics.
- Media
Query: Ensures that the boxes become full-width on
smaller screens (under 600px).
This exercise helps students to understand how to manage element dimensions effectively, especially when designing responsive layouts.
No comments:
Post a Comment