in

CSS DIMENSION | Learn How To Dimension Web Pages Using CSS

In this tutorial we will be looking at CSS dimensions and how to scale elements on your web page using flexible dimension properties. In our previous tutorial we looked at CSS cursor and how to style them for different sections of our web page. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS CURSOR | Learn How To Style Cursors on Web Page Using CSS

CSS DIMENSION

We have been making use of dimension in our previous tutorials but we will be using this tutorial to highlight more on special dimension properties majorly related to boxes which we feel you should know about. There are some dimensional properties we can use to tweak the dimension of boxes. This dimensional properties include:

  • height – This property is used to control the height of a box element.
  • width – This property can be used to control the width of a box element.
  • line-height – This property can be used to control the space between two lines of sentence or words.
  • min-height – This property can be used to set the minimum height a box element can be.
  • max-height – This property is used to set the maximum height a box element can be.
  • min-width – This property is used to set the minimum width a box element can be.
  • max-width – This property is used to set the maximum width a box element can be.

Note: To better understand this property it is advice able to set the border of any block level element.

The height and width property

we can control the height and width of a block level element using the height and width property. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF LINE HEIGHT AND WIDTH PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; height: 150px; width: 300px;">
      This is a paragraph used to display how height and width works in css. We can use height and width to
      make adjustment to the box element height and width in the HTML web document. 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF LINE HEIGHT AND WIDTH PROPERTY

This is a paragraph used to display how height and width works in css. We can use height and width to make adjustment to the box element height and width in the HTML web document.

The line-height property

We use the line height property to set the spacing between two lines of sentence. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF LINE HEIGHT PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; height: 150px; width: 300px; line-height: 30px;">
      This is a paragraph used to display how a line height works in css. We can use line height to
      make adjustment to the text line spacing in the HTML web document. 
   </p>


   
</body>
</html>

RESULT

ILLUSTRATION OF LINE HEIGHT PROPERTY

This is a paragraph used to display how a line height works in css. We can use line height to make adjustment to the text line spacing in the HTML web document.

The min-height property

This property is used to set the minimum height of a box element. Illustration shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF MIN HEIGHT PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; width: 300px; min-height: 300px;">
      This is a paragraph used to display how a height property works in css. We can use min height to
      make adjustment to the minimum height of an element in the HTML web document. 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF MIN HEIGHT PROPERTY

This is a paragraph used to display how a height property works in css. We can use min height to make adjustment to the minimum height of an element in the HTML web document.

max-height Property

This property is used to set the maximum height a box element can be. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF MAX HEIGHT PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; width: 300px; max-height: 300px;">
      This is a paragraph used to display how a max height property works in css. We can use max height to
      make adjustment to the maximum height of an element in the HTML web document. 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF MAX HEIGHT PROPERTY

This is a paragraph used to display how a max height property works in css. We can use max height to make adjustment to the maximum height of an element in the HTML web document.

The min-width property

This property is used to control the minimum width a box element can be. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF MIN WIDTH PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; height: 150px; min-width: 300px;">
      This is a paragraph used to display how a min width property works in css. We can use min width to
      make adjustment to the minimum width of an element in the HTML web document. 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF MIN WIDTH PROPERTY

This is a paragraph used to display how a min width property works in css. We can use min width to make adjustment to the minimum width of an element in the HTML web document.

max-width property

The max-width property controls the maximum with of an element. Illustration shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF MAX WIDTH PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; height: 150px; max-width: 300px;">
      This is a paragraph used to display how a max width property works in css. We can use max width to
      make adjustment to the maximum width of an element in the HTML web document. 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF MAX WIDTH PROPERTY

This is a paragraph used to display how a max width property works in css. We can use max width to make adjustment to the maximum width of an element in the HTML web document.

conclusion

The CSS DIMENSION properties listed above are needed when controlling dimensions on a web page. A good understanding of this dimension properties will enable you make good web page element dimension. Lets move on to the next topic on CSS SCROLLBARS

What do you think?

css cursor

CSS CURSOR | Learn How To Style Cursors on Web Page Using CSS

css scrollbars

CSS SCROLLBARS | Set Scrollbars On Web Pages Using CSS