CODESCRACKER

CSS Dimensions

Using CSS, we can define the dimensions (width and height) of an element. The following CSS properties are used to define the dimensions of an element:

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; color: white; padding: 10px;
         margin: 10px 0;}
      div.a{width: 220px; height: 100px;}
      div.b{min-width: 220px; min-height: 120px;}
   </style>
</head>
<body>
   
   <div class="a">CODESCRACKER</div>
   <div class="b">CODESCRACKER</div>
   
</body>
</html>
Output
CODESCRACKER
CODESCRACKER

In the above example, I defined some CSS styles for div elements along with two classes: .a and .b.

The CSS rules for the div elements include:

The first div element with class a has additional CSS rule width set to 220px and height set to 100px. This will give the element a fixed width of 220 pixels and a fixed height of 100 pixels.

The second div element with class b has additional CSS rule min-width set to 220px and min-height set to 120px. This will give the element a minimum width of 220 pixels and a minimum height of 120 pixels. The element can be wider and taller if needed to accommodate its content.

Both the div elements have text content of "CODESCRACKER" which will be displayed inside the elements according to the specified styles.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!