CSS (Cascading Style Sheets) units are used to define measurements for various properties such as length, width, font-size, and so on. There are several types of CSS units, including:
Absolute Units
These units are fixed and do not change with respect to other elements on the page. The absolute units are:
Pixels (px)
Pixel is a unit of measurement that represents a single dot on a computer screen. It is commonly used for defining fixed sizes such as the width and height of an element.
Inches (in)
An inch is a physical unit of measurement that is equivalent to 2.54 centimeters. It is used to define print media styles.
Centimeters (cm)
A centimeter is a physical unit of measurement that is equivalent to 0.3937 inches. It is also used for defining print media styles.
Millimeters (mm)
A millimeter is a physical unit of measurement that is equivalent to 0.03937 inches. It is also used for defining print media styles.
Relative Units
These units are relative to other elements on the page and adjust their size based on the context in which they are used. The relative units are:
Percentages (%)
A percentage is a relative unit that represents a portion of the available space. For example, if you set the width of an element to 50%, it will take up half of the available space.
em
The “em” unit is relative to the font-size of the parent element. For example, if the parent element has a font-size of 16px and you set the font-size of a child element to 2em, it will have a font-size of 32px (2 times the parent font-size).
rem
The “rem” unit is similar to the “em” unit, but it is relative to the root element (i.e., the <html> element). This makes it easier to maintain consistent font-sizes throughout your site.
vh
The “vh” unit represents a percentage of the viewport height. For example, if you set the height of an element to 50vh, it will take up half of the viewport height.
vw
The “vw” unit represents a percentage of the viewport width. For example, if you set the width of an element to 50vw, it will take up half of the viewport width.
vmin and vmax
These units represent the minimum or maximum of the viewport height or width. For example, if you set the height of an element to 50vmin, it will take up half of the smaller dimension of the viewport (either height or width).
Conclusion
These are the most commonly used CSS units, but there are a few other units as well. It’s important to choose the appropriate unit based on the context in which it will be used to ensure that your styles are consistent and easy to maintain.
