Learn CSS Height and Width




In CSS3 we use the height and width properties to define the height and width of an HTML element.


The value of the height and width can be set in pixels (px) centimeters (cm) and percent (%).


CSS height and width properties do not include borders, padding, margins and etc, they only define the height and width of an HTML element.


Here is a list of values we may attach to the CSS height and width properties:


  • auto - the default value. let the browser calculates the height and width
  • % - Defines the height/width in percentage of the containing element
  • length - Defines the height/width in pixels, centimeters etc.
  • inherit - The height/width will be inherited from its parent value
  • initial - Sets the height/width to its default value

Example of CSS element that is set to height of 180 pixels and width of 400 pixels


This element has a width of 400 pixels and a height of 180 pixels.


Code Example:


            <style>
      .box-1
      {
     height:180px;
     width:400px;
background-color:#FF9E15;
   }
</style>
 <div class="box-1"></div>
 
  
Try yourself >>

In CSS you can also use percentage (%) to define the width or height of an HTML element


Code Example:


            <style>
      .box-1
      {
        height:200px;
     width:10%;
     background-color:#FF9E15;
   }
</style>
 <div class="box-1"></div>
 
  
Try yourself >>



Learn CSS Max-width


When the browser window is smaller than the width of an element, that might happn when using laptop or mobile smartphone, the browser will add scrollbar or display the HTML element unclearly


Max-width will improve how the browser will display the HTML element.


In CSS we define the max-width in length values, like pixels (px), centimeters, or in percentage (%).


This element has a height of 250 pixels and a max-width of 900 pixels.


Resize your browser or open this page on your phone, to see the difference when using CSS max-width,
Width of 900 pixels would not fit into mobile phone screen and will look unnatural, but max width makes sure the width will stop before 900px.

Code Example:


            <style>
      .box-2
       {
  max-width: 900px;
  height: 250px;
  background-color:#FF9E15;
}   
</style>
 <div class="box-2"></div>
 
  
Try yourself >>






learn css layout course in 1 day, you are in the right place to learn html5 and css3 from scratch, with FreeCodeWiki you can learn modern css, we are the best site to learn css for free online.



Navigation