CodesJava

Easy learning with example program codes

CSS Width

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:

ValueUses
autoTo calculate the width.
lengthTo specify the width in px, cm etc.
%To specify the width of the containing block in %.
initialTo specify the property to its default value.
inheritTo 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>

Output:

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>

Output:

Explanation:

In the above example, we are defining the width of the HTML <div> element in Percentage.

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status