CSS width and height properties
- Introduction to CSS Width Property
- CSS max-width property
- CSS min-width property
- Introduction to CSS height property
- CSS min-height property
- CSS max-height property
You can define the width of the HTML elements by using the CSS width property. The width is that space which any element occupies horizontally in the webpage.
The default width of all elements is different. Such as the default width of the table is according to the contents of the columns and the default width of any paragraph is 100%. But it is not necessary that you use the default width only. You can define whatever width of elements you want with the CSS width property.
For example, you want to show the text of a paragraph in quotes but the default width of the paragraph is 100%. In this situation, you can define the width of that paragraph by the width property according to yourself.
Similarly, if you want to define the width of any element you can define by this property. Only you can’t define inline elements such as the width of the <span> element.
The syntax of CSS width Property
The general syntax of the lower CSS width property has been given below.
Syntax:- width: auto;
width: number-px (pixels);
width: number%;
Example:- width: auto;
width: 200px;
width: 50%;
As you can see in the above syntax, there are three possible values of the width property. When you define the value of the width property auto, the width of the element is set to default.
When you define the width property in value pixels, the width of the same pixels that element is covered.
You can also define the width property's value in percent(%). The width of a webpage is 100%. So you can define any width of an element to 100%. The example of CSS width property has been given below.
When you define the width property in value pixels, the width of the same pixels that element is covered.
You can also define the width property's value in percent(%). The width of a webpage is 100%. So you can define any width of an element to 100%. The example of CSS width property has been given below.
<!DOCTYPE html>
<html>
<head>
<title> CSS width Property Example </title>
<style>p
{
width: 25%;
border: 2px solid #cccccc;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS width property using the percent (%) value. Here the width of the paragraph is 25% of the webpage. </P>
</body>
</html>
The above example will produce the below output.
CSS max-width Property
In addition to the width property in CSS, the max-width property is also available. This property is used to define the maximum width of the element. When you define this property for the element, the width of that element can’t exceed the value defined by this property.
For example, if you define a maximum width of 300 pixels of the paragraph, then the width of that paragraph will not show more than 300 pixels on any device.
This property is used with the min-width property. The maximum and minimum width of the element is defined by these two properties. By doing so, that element automatically adjusts on any device from minimum to maximum width.
In CSS these two properties are used to make the element responsive. The value of this property can also be given in pixels and percentages. This property has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS max-width Property Example </title>
<style>p {
max-width: 500px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS max-width property using the pixels value. Here the max-width of the paragraph is 500 pixels on the webpage. </p>
</body>
</html>
The above example can be seen on any device, but the paragraph width will not show more than 500 pixels. This example will generate the below output.
CSS min-width Property
This property is used to set the minimum width of any element. When you define the min-width property for the element, the width of that element should not be less than the value defined by this property.
You can also define the value of this property in pixels and percentages. This has been explained by the below example.
p
{
min-width: 250px;
max-width: 400px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS min-width and max-width property using the pixels value. Here the min-width of the paragraph is 250 pixels and max-width 400 pixels on the webpage. </P>
<!DOCTYPE html>
<html>
<head>
<title> CSS min-width Property Example </title>
<style>p
{
min-width: 250px;
max-width: 400px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS min-width and max-width property using the pixels value. Here the min-width of the paragraph is 250 pixels and max-width 400 pixels on the webpage. </P>
</body>
</html>
In the above example, the paragraph width will not be more than 400 pixels and less than 250 pixels. This example will generate the below output.
Introduction to CSS height Property
Like the width, you can also define the height of an element by CSS. For this, height property is available in CSS. This property is used to define the space that is vertically occupied by any element.
The height of most HTML elements is according to the content. If you want, you can fix this height by the height property. But while doing so you should be cautious because if you define the content and does not enough height to show, the content will be overflowed out of the box.
Therefore it is important to note that content can be easily displayed in the defined height. For example, if you define the height of a paragraph 500px but its text is too large, it will start showing out by overlapping the text paragraph border.
Although overflow property is present in CSS to avoid overflow problem, this property should not be used for all elements. This overflow property is used to create a fixed layout.
The syntax of CSS height Property
The general syntax of the CSS height property has been given below.
Syntax:- height: auto;
height: number-px;
height: number-%;
Example:- height: auto;
height: 200px;
height: 50%;
When the value of the property is defined auto, height is automatically set according to the content. Apart from this, you can also define the height in pixels and percentages. When you define the height in percent, that element only takes the percentage height of the webpage's total height. The example of CSS height property has been given below.
<!DOCTYPE html>
<html>
<head>
<title> CSS height Property Example </title>
<style>
p
{
height: 250px;
width: 250px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS height property using value in the pixels (px) . Here the width of the paragraph is 250px of the webpage. </p>
<style>
p
{
height: 250px;
width: 250px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS height property using value in the pixels (px) . Here the width of the paragraph is 250px of the webpage. </p>
</body>
</html>
The above example will produce the below output.
CSS min-height Property
Min-height property is present in CSS to define the minimum height of their elements. When you define this property for any element, the height of that element can’t be less than the height defined by this property. You can define the value of this property in pixels and percentages. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS min-height Property Example </title>
<style>
p
{
width: 250px;
min-height: 250px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS min-height property using in the pixels value. Here the min-height of the paragraph is 250 pixels of the webpage. </P>
<style>
p
{
width: 250px;
min-height: 250px;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS min-height property using in the pixels value. Here the min-height of the paragraph is 250 pixels of the webpage. </P>
</body>
</html>
The above example will produce the below output.
CSS max-height Property
Max-height property is present in CSS to define the maximum height of the elements. When this property is defined for any element, the height of that element can’t exceed the value defined by this property.
The value of this property can also be given in pixels and percentages. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS max-height Property Example </title>
<style>
p
{
width: 350px;
max-height: 50px;
border: 2px solid #cccccc;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS max-height property using in the pixels value. Here the max-height of the paragraph is 50 pixels of the webpage. </P>
<style>
p
{
width: 350px;
max-height: 50px;
border: 2px solid #cccccc;
text-align: justify;
}
</style>
</head>
<body>
<p> HTML is used to build basic webpage structure and CSS is used to style that structure. In this tutorial, we are discussing about CSS max-height property using in the pixels value. Here the max-height of the paragraph is 50 pixels of the webpage. </P>
</body>
</html>
The above example will generate the below output.
Posts
0 comments:
Post a Comment
Thank you for reading the post.