MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Sunday, March 24, 2019

How to use css width and height properties? CSS Tutorial 07

 MyBlogHelp     March 24, 2019     css     2 comments   

css width and height properties


 

CSS width and height properties

  1. Introduction to CSS Width Property
  2. CSS max-width property
  3. CSS min-width property
  4. Introduction to CSS height property
  5. CSS min-height property
  6. CSS max-height property

Introduction to CSS width 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.


<!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-width-property-example

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-max-width-property-example

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.


<!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.

CSS-min-width-property-example

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>
</body>
</html>


The above example will produce the below output.


CSS-height-property-example

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>
</body>
</html>

The above example will produce the below output.


CSS-min-height-example

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>
</body>
</html>

The above example will generate the below output.

CSS-max-height-example



        <<-- PREVIOUS                                                                   NEXT -->>





  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

2 comments:

  1. AnonymousMarch 26, 2019 at 3:22 PM

    Heya i am for the first time here. I came across this board and I to find It truly
    helpful & it helped me out a lot. I'm hoping to offer one thing again and help others such as you aided me.

    ReplyDelete
    Replies
      Reply
  2. brittanymlemayMay 22, 2019 at 12:06 PM

    Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. Affinity at serangoon showroom

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ▼  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ▼  March (6)
      • How to use css padding and margin properties? CSS ...
      • How to use css border property? CSS Tutorial 08
      • How to use css width and height properties? CSS Tu...
      • How to create a css box model? CSS Tutorial 06
      • How to use link properties? CSS Tutorial 05
      • How to set css styling of images, table and lists?...
    • ►  February (3)
    • ►  January (16)
  • ►  2018 (54)
    • ►  December (27)
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com