Assignments Of Class 7: Width and Height
Assignment 1: Set Fixed Width and Height for a Box
Objective: Set fixed width and height for a box using width and height properties.
Steps:
1. Create an HTML file with a div element.
2. Apply CSS to the div to set its width to 300px and height to 200px.
Solution:
HTML:
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>Fixed Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Fixed Box</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 300px;
height: 200px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px; /* Vertically centers text */
}
Explanation:
- width: 300px; sets the width of the box.
- height: 200px; sets the height of the box.
- The text inside the box is centered vertically using line-height.
Assignment 2: Create a Box with Maximum Width
Objective: Use max-width to prevent a box from exceeding a certain width.
Steps:
1. Create a div element with a width of 100% and set a max-width of 500px.
Solution:
HTML:
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>Max Width Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Max Width Box</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 100%;
max-width: 500px; /* The box won't exceed 500px */
background-color: #2ecc71;
color: white;
text-align: center;
padding: 20px;
}
Explanation:
- width: 100%; allows the box to take the full width of its parent container.
- max-width: 500px; ensures that the box never exceeds 500px, even if the parent container is wider.
Assignment 3: Box with Maximum Height
Objective: Use max-height to limit the height of a box.
Steps:
1. Create a div element with a height of auto and set a max-height of 300px.
Solution:
HTML:
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>Max Height Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">
Max Height Box<br>Content will be cut off if it exceeds max-height.
</div>
</body>
</html>
CSS:
css
Copy code
.box {
height: auto;
max-height: 300px; /* The box won't exceed 300px in height */
background-color: #e74c3c;
color: white;
overflow: hidden; /* Hides overflow content */
padding: 20px;
}
Explanation:
- height: auto; makes the box’s height adjust according to its content.
- max-height: 300px; ensures the box doesn’t grow taller than 300px, and overflow: hidden; hides any content that exceeds the height.
Assignment 4: Create a Fully Responsive Box
Objective: Make a box responsive to screen width by using percentage-based width and height.
Steps:
1. Create a div element with width set to 50% and height set to auto.
Solution:
HTML:
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 Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Responsive Box</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 50%;
height: auto;
background-color: #f39c12;
color: white;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
Explanation:
- width: 50%; makes the box take up half of the available width.
- height: auto; adjusts the height according to the content.
Assignment 5: Create a Box that Stretches but Doesn't Exceed Max Width
Objective: Combine width, max-width, and height to create a responsive box that stretches but doesn’t exceed a maximum width.
Steps:
1. Create a box that stretches to fit the container but limits its width to 500px.
Solution:
HTML:
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>Stretching Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Stretching Box</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 100%;
max-width: 500px; /* Maximum width */
height: 200px;
background-color: #8e44ad;
color: white;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
Explanation:
- width: 100%; makes the box stretch to 100% of the container width.
- max-width: 500px; prevents the box from exceeding 500px in width.
Assignment 6: Add a Border and Padding to a Responsive Box
Objective: Add border and padding to a responsive box with constrained width.
Steps:
1. Add a border and padding to the responsive box created in Assignment 4.
Solution:
HTML:
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>Box with Border and Padding</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Box with Border and Padding</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 50%;
height: auto;
background-color: #e67e22;
color: white;
text-align: center;
padding: 40px;
border: 5px solid #34495e; /* Adds border */
box-sizing: border-box;
}
Explanation:
- padding: 40px; adds space inside the box around the content.
- border: 5px solid #34495e; adds a border around the box.
Assignment 7: Set Height to 100vh
Objective: Set the height of a box to be the same as the viewport height.
Steps:
1. Create a box that fills the entire height of the browser window.
Solution:
HTML:
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>Full Viewport Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Full Viewport Box</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 100%;
height: 100vh; /* 100% of the viewport height */
background-color: #16a085;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
Explanation:
- height: 100vh; makes the box fill 100% of the viewport height.
- display: flex; and align-items: center; vertically center the content.
Assignment 8: Create a Box with min-width and min-height
Objective: Use min-width and min-height to ensure a box has a minimum size.
Steps:
1. Create a box with a minimum width of 200px and a minimum height of 150px.
Solution:
HTML:
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>Min Size Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Min Size Box</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 100%;
min-width: 200px; /* Ensures the box is at least 200px wide */
min-height: 150px; /* Ensures the box is at least 150px tall */
background-color: #2980b9;
color: white;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
Explanation:
- min-width: 200px; and min-height: 150px; ensure the box never becomes smaller than the specified dimensions.
Assignment 9: Create a Box with Responsive Width and Fixed Height
Objective: Set a box that has a responsive width but a fixed height.
Steps:
1. Create a box that adjusts its width based on the screen but has a fixed height.
Solution:
HTML:
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 Width, Fixed Height Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Responsive Width, Fixed Height</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 80%; /* 80% of the parent container */
height: 200px; /* Fixed height */
background-color: #f1c40f;
color: white;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
Explanation:
- width: 80%; makes the box responsive.
- height: 200px; gives it a fixed height.
Assignment 10: Box with Scrollbars
Objective: Set the width and height for a box that shows scrollbars when content overflows.
Steps:
1. Create a box with a fixed width and height, and add scrollbars for overflow content.
Solution:
HTML:
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>Box with Scrollbars</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel enim sapien. Nam non sollicitudin eros, vitae scelerisque ex.
<!-- Add more content here to overflow -->
</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 300px;
height: 200px;
background-color: #9b59b6;
color: white;
overflow: auto; /* Adds scrollbars if content exceeds box size */
padding: 20px;
}
Explanation:
- overflow: auto; ensures scrollbars appear if content exceeds the box dimensions.
No comments:
Post a Comment