The CSS units are used to specify measurements in Cascading Style Sheets (CSS). They allow you to define the size, length, or position of elements on a web page.

CSS units can be categorized into two main types: absolute units and relative units.

Absolute Units

The Absolute Units in Cascading Style Sheets are mentioned below -

1. Pixel (px) - The most common absolute unit, representing a single dot on a screen. It provides a fixed size regardless of the device's resolution.


2. Point (pt) - Commonly used in print media, where 1 point is equal to 1/72nd of an inch.


3. Inch (in) - Represents an inch measurement.


4. Centimeter (cm) - Represents a centimeter measurement.


5. Millimeter (mm) -Represents a millimeter measurement.

Relative Units

The Relative Units in Cascading Style Sheets are mentioned below -

1. Percentage (%) - Represents a percentage of the parent element's size or the available space.


2. Viewport Height (vh) - Represents a percentage of the viewport's height.


3. Viewport Width (vw) - Represents a percentage of the viewport's width.


4. Viewport Minimum (vmin) - Represents a percentage of the viewport's smaller dimension (height or width).


5. Viewport Maximum (vmax) -Represents a percentage of the viewport's larger dimension (height or width).


6. em - Represents the computed font size of the element. It's relative to the font size of its parent or, if used on the root element, to the browser's default font size. rem: Similar to em, but it's relative to the font size of the root element (usually the element).


7. ch - Represents the width of the "0" character of the element's font.


8. ex - Represents the height of the lowercase "x" character of the element's font.


9. fr - Represents a fraction of the available space in a CSS grid or flex container. Used in grid-template-columns, grid-template-rows, and flex-basis.