CSS 3 Tutorial Banner Image

CSS Height and Width Property Tutorial For Beginners

Views: 352

In our previous tutorial we learned about the CSS background attachment properties and CSS shorthand properties. Setting height and width of an element is one of the most important thing needed while styling your elements. In this tutorial we will be learning how we can set height and width of an element with CSS.

 

CSS Height and Width Property Tutorial For Beginners

css height and width property

CSS height property

CSS height property allows you to configure height of an element, there are many variants of CSS height property. Let us discuss them one by one and see their usage.

 

CSS Height

The height property is used to apply height of an element.

Usage:

height:value;

Suppose we want to set height 400px to an element with class “test” then we will apply following rule.

.test{

                height:400px;

}

CSS Min Height

The min-height property is used to declare the minimum height of an element. Suppose I do not want an element to be smaller in height then a defined pixel then I will use min-height property with the height property. It will apply two rules for the element, i.e. the element cannot be smaller than min-height value and the default height will be borrowed from the height property.

Suppose we want our element to capture 80% of our screen area and also when the screen size is small it should not shrink more than 100 pixels then we will apply the following rule.

.test{

                height:80%;

                min-height:100px;

}

CSS Max Height

The max-height property is used to declare the maximum height of an element. For instance suppose I have an image that is of 800px width and 600px height now I do not want it to over stretch to prevent it from breaking in pixels. So I will use the max-height property with value 600px. This will allow me to set a rule that will stop the image from getting larger height than 600px.

Usage:

max-height:value;

 

Suppose we want our element to have a maximum height of 1024 pixel and a minimum height of 600px and also it to have a height 80% of screen height then we will apply the following rules.

.test{

                height:80%;

                max-height:1024px;

                min-height:600px;

}

CSS Line Height

The line-height property is a very handy property for text styling, it allows us to set height for a line of text, which allows us to let set the gap between every line of paragraph as per our needs.

Usage:

line-height:value;

 

Suppose we want to have a gap of 100px between each sentence of paragraph elements then will use the following rule

p{

                line-height:100px;

}

CSS Width property

CSS width property allows you to configure width of an element, there are many variants of CSS width property. Let us discuss them one by one and see their usage.

CSS Width

The CSS width property allows us to set width of an element.

Usage:

width:value;

Suppose we want to set width 600px to an element with class “test” then we will apply following rule.

.test{

width:400px;

}

 

CSS Min Width

The min-width property is used to declare the minimum width of an element. Let us assume we want to retain a minimum width and do not compress itself more than the expected pixel then we will use the min-width CSS property. It will not let the element get compressed more than our allotted min-width value. The min width can be used with the CSS width property.

Usage:

min-width:value;

Suppose we want to have a minimum width to our element and doesn’t want it to shrink more than 100 pixels and also on larger screens we want it to have 50% width then we will apply the following rule to that element.

.test{

width:50%;

min-width:100px;

}

CSS Max Width

The max-width property is used to declare the maximum width of element same as the max-width property. It restricts an element from exceeding the width more than it is allowed by the rule of max width.

Usage:

max-width:value;

 

Usage:

Suppose we want our element to have a width of 50% and not to shrink more than 100 pixel with that we also want it not to expand more than 600 pixels then we will use the following rule.

.test{

                width:50%;

                min-width:100px;

                max-width:600px;

}

That’s all for today, in next chapter we will learn about the margin and padding CSS properties, if you have any questions or suggestion please share in comments below, if you feel this tutorial was helpful then please do share it with your friends and followers.

CSS Margin Property- CSS Tutorial for Beginners

CSS Padding Property- CSS Tutorial for Beginners

Comments: 1

Your email address will not be published. Required fields are marked with *