Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS units – %, em, rem, px, vh, vw
In CSS or the Cascading Style Sheet, there are many units available to represent the values of different properties in different ways according to the need. The CSS properties like: font-size, height, width and line-height etc are used to define the different properties to a container. The values of these properties can be assigned in the form of different units.
In this article, we are going to learn about the different CSS units in details and implement them practically to understand use of each one of them.
There are many CSS units available in CSS, but in this article we are only going to learn or discuss about the following properties −
Pixels (px) − The pixels or px unit is the smallest and mostly used by the beginners to set values of different length properties. Mathematically, 1px is defined as the 1/96th part of a inch i.e. 1px = 1/96 of 1 inch.
Syntax
Following syntax will show you how to use the pixel unit to set values of different length properties −
property_name: numeric_value px;
em − The em property is used to set the value of the length properties relative to the font size of the element. If we compare em with pixels, then we found that 1em is same as the 16px i.e. 1em = 16px.
Syntax
Following syntax will show you how to use the pixel unit to set values of different length properties −
property_name: numeric_value em;
rem − The rem property sets the values of the properties relative to the font-size of the root element in HTML i.e. the <html> tag. If we compare rem with pixels, then we found that 1rem is also same as the 16px i.e. 1rem = 16px.
Syntax
Following syntax will show you how to use the pixel unit to set values of different length properties −
property_name: numeric_value rem;
Note − It is recommended not to use pixel, em and rem as unit while developing a web page or application. Because, it will not allow the containers in the HTML to change their width and height dynamically according to the viewport size at the time of making the web page responsive.
Viewport-width (vw) − The viewport width or the vw property is used to set the values according to the current viewport width in which user is viewing the web page. It will allow the containers to change their width dynamically according to the current viewport width of the web page.
Syntax
Following syntax will show you how to use the pixel unit to set values of different length properties −
property_name: numeric_value vw;
Viewport-height (vh) − The viewport height or the vh is almostsimilar to the viewport width property. The vw is used to set the dynamic width of the element, on the other hand, vh is used to set the dynamic height of the element. It will dynamically set the height of the element relative to the current viewport height every time the height is changed by the user.
Syntax
Following syntax will show you how to use the pixel unit to set values of different length properties −
property_name: numeric_value vh;
Percentage (%) − The percentage or % property also sets the dynamic values to the properties we want to assign to the elements in the HTML document. We can use the same % symbol for each property to assign them values instead of using different for each one of them unlike of vw and vh.
Syntax
Following syntax will show you how to use the pixel unit to set values of different length properties −
property_name: numeric_value %;
Let us now discuss each one of them and see the difference by practically implementing them with the help of code example.
Steps
Step 1 − In the first step, we will define different HTML elements to set different length properties with different CSS units on them.
Step 2 − In the next step, we will define the styles for the elements defined in the previous step inside the <style> </style> element defined inside <head> </head> tag.
Step 3 − In the last step, we will use the different CSS units to assign values to properties and see difference between them.
Example
The below example will help you understand the difference between all the CSS units and understand them practically −
<html>
<head>
<style>
.div1 {
margin-top: 5%;
width: 50%;
height: 20%;
background-color: aqua;
}
.div2 {
margin-top: 5vh;
width: 50vw;
height: 20vh;
background-color: aqua;
}
.para1 {
font-size: 16px;
}
.para2 {
font-size: 1.2em;
}
.para3 {
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>CSS units – %, em, rem, px, vh, vw</h2>
<div class = "div1"> width: 50% <br> height: 20% </div>
<div class = "div2"> width: 50vw <br> height: 20vh </div>
<p class = "para1"> Paragraph with font-size: 16px </p>
<p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
<p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>
In the above example, we have used different CSS units to assign height, width and font size to the elements.
Conclusion
In this article, we have learned about the different CSS units which we can use to set values of the length properties in CSS. We have discussed them in details by implementing them practically with the help of code example.
523 Views
