About Lesson
Definition:
The height
and width
properties in CSS are used to set the height and width of an element, respectively.
Syntax:
HTML
selector {
height: value;
width: value;
}
value
can be specified in various units such as pixels (px
), percentage (%
), em, rem, etc.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Set height and width for a div with the class 'box' */
.box {
height: 100px;
width: 200px;
background-color: lightblue;
border: 2px solid navy;
margin: 20px;
padding: 10px;
}
/* Set height and width for an image with the class 'image' */
.image {
height: 150px;
width: 300px;
}
</style>
<title>Height and Width Example</title>
</head>
<body>
<div class="box">
This is a box with a specified height and width.
</div>
<img class="image" src="f.jpeg" alt="Example Image">
</body>
</html>