Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV


CSS - Units


While defining the width or height of any element in CSS, you might have already used the CSS Units unknowingly.


Say for example:


img {
	width:150px;
	height:190px;
}

In the above CSS properties we have specified the width and height for the img element. And the height and width is specified in px or pixels.


This px is a Unit in CSS.


Units in CSS


Units in CSS define the length in CSS. Say for example, the width, height expresses the length in units.


There are two types of Units in CSS :

  1. Absolute Units

  2. Relative Units


Absolute Units in CSS


Absolute Units in CSS are fixed measurements that remains fixed even if we change the screen size.


Below are the list of Absolute Units in CSS :


  1. Pixels or px


    It is equal to one pixel on the screen.


    Example : 

    height:12px;

  2. Centimeters or cm


    It is equal to one Centimeter.


    Example : 

    width:12cm;

  3. Millimeters or mm


    It is equal to one Milimeter.


    Example : 

    height:12mm;

  4. Inches or in


    It is equal to one Inch.


    Example : 

    width:2in;

  5. Points or pt


    It is equal to one pt.


    Example : 

    height:12pt;

Relative Units in CSS


Relative Units in CSS are fixed measurements that changes when we change the screen size.


Below are the list of Relative Units in CSS :

  1. Em Unit


    The em unit is relative to the parent elements font size.

  2. rem Unit


    The rem unit is relative to the font size of the root elements.

  3. Viewport widths or vw Unit


    Viewport widths or vw is relative to the viewport width.

  4. Viewport heights or vh Unit


    Viewport heights or vh is relative to the viewport height.

  5. Percentage or % Unit


    Percentage or % is relative to the font-size of the parent element.

  6. ex Unit


    It is relative to the x-height of the current font.

  7. ch Unit


    It is relative to width of the zero.

Em Relative Unit in CSS


The em unit is relative to the parent elements font size.


Example : 



<html>
<head>
	<style>
		p {
  			font-size: 20px;
		}
		
		span {
  			font-size: 2em;
  		}	
	</style>
</head>
<body>
	<p> This is the parent. <span> This is the child </span>  </p>
</body>
</html>


Output :



 

So, if you look at the above example, the <span> element is the child of the parent <p> element.


<p> This is the parent. <span> This is the child </span>  </p>

Now, if you look at the font-size of the parent element, it is 20px.


p {
	font-size: 20px;
}

And the font-size of the child element is 2em. Which is 2 times the font-size of parent element i.e. 2x20=40px.


rem Relative Unit in CSS


The rem unit is relative to the font size of the root elements.


Example : 



<html>
<head>
	<style>
	
		body {
			font-size: 10px;
		}
		
		p {
  			font-size: 20px;
		}
		
		span {
  			font-size: 2rem;
  		}	
	</style>
</head>
<body>
	<p> This is the parent. <span> This is the child </span>  </p>
</body>
</html>


Output :



 

So, if you look at the above example, the <span> element is the child of the parent <p> element.


<p> This is the parent. <span> This is the child </span>  </p>

However, this time the <span> element will not take the font-size from it parent. Rather it would take the font-size of the root element(i.e. <body>).


And the font-size of <body> element is 10px.


So the font-size of the <span> element becomes 2x10=20px.


Viewport widths or vw Relative Unit in CSS


Viewport widths or vw is relative to the viewport width.


Example : 



<html>
<head>
	<style>

		p {
  			font-size: 20vw;
		}
	
	</style>
</head>
<body>
	<p> This is the paragraph </p>
</body>
</html>


Output :



 

So, if you increase or decrease the width of your browser the font-size of the <p> element changes. That is because Viewport widths or vw is relative to the viewport width.


Viewport heights or vh Relative Unit in CSS


Viewport heights or vh is relative to the viewport height.


Example : 



<html>
<head>
	<style>

		p {
  			font-size: 20vh;
		}
	
	</style>
</head>
<body>
	<p> This is the paragraph </p>
</body>
</html>


Output :



 

So, if you increase or decrease the height of your browser the font-size of the <p> element changes. That is because Viewport height or vh is relative to the viewport height.


Percentage or % Relative Unit in CSS


Percentage or % is relative to the font-size of the parent element.


Example : 



<html>
<head>
	<style>	
		p {
  			font-size: 40px;
		}
		
		span {
  			font-size: 50%;
  		}	
	</style>
</head>
<body>
	<p> This is the parent. <span> This is the child </span>  </p>
</body>
</html>


Output :



 

So, in the above example, <span> element is the child of the <p> element. 


<p> This is the parent. <span> This is the child </span>  </p>

The font-size of <p> element is 40px.


p {
	font-size: 40px;
}

And we have made the font-size of the <span> element as 50%. Which is half the size of <p> element.


And if you see the font-size of the <span> element, it is half the font-size of <p> element.



❮❮ PREV