To define the width of an element, the CSS width property is used. The width is specified for the area inside the padding, border, and margin of an element.
CSS width Values:
| Value | Uses |
| auto | To calculate the width. |
| length | To specify the width in px, cm, etc. |
| To specify the width of the containing block in | |
| initial | To specify the property to its default value. |
| inherit | To inherit the property from its parent element. |
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 200px;
background-color: crimson;
}
</style>
</head>
<body>
<h2>Square area</h2>
<p>Height and Width of 200px.</p>
<div></div>
</body>
</html>
Explanation:
In the above example, we are defining the width of the HTML <div> element in Pixels.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: crimson;
}
</style>
</head>
<body>
<h2>Content area</h2>
<p>Width of 50%.</p>
<div></div>
</body>
</html>
Explanation:
In the above example, we are defining the width of the HTML <div> element in Percentage.