CSS units
There are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px; in which the px (or pixel) is the CSS unit. They are used to set margin, padding, lengths, and so on.
We cannot apply the whitespace between the number and the unit. The unit can be omitted for the value 0. Some properties of CSS allow the negative values of length.
The length unit in CSS is of two types:
- Absolute length.
- Relative length.
Absolute lengths
These are the fixed-length units, and the length expressed using the absolute units will appear as exactly that size. It is not recommended to use on-screen, because the size of the screen varies too much. So, the absolute units should be used when the medium of output is known, such as the print layout.
Absolute units are useful when the responsiveness is not considered in a project. They are less favorable for the responsive sites because they do not scale when the screen changes.
Generally, absolute lengths are considered to be the same size always. The absolute length units are tabulated as follows:
| Unit | Name | Explanation |
|---|---|---|
| cm | Centimeters | It is used to define the measurement in centimeters. |
| mm | Millimeters | It is used to define the measurement in millimeters. |
| in | Inches | It is used to define the measurement in inches. 1in = 96px = 2.54cm |
| pt | Points | It is used to define the measurement in points. 1pt = 1/72 of 1 inch. |
| pc | Picas | It is used to define the measurement in picas. 1pc = 12pt so, there 6 picas is equivalent to 1 inch. |
| px | Pixels | It is used to define the measurement in pixels. 1px = 1/96th of inch |
Example
In this example, we are using the font-size property for the paragraphs for defining the values using the above absolute length units.
Output
Relative lengths
Relative units are good to style the responsive site because they scale relative to the window size or the parent. They specify the length, which is relative to another length property.
Depending on the device, if the size of the screen varies too much, then the relative length units are the best because they scale better between the different rendering mediums. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.
The relative length units are tabulated as follows:
| Unit | Name |
|---|---|
| em | It is relative to the font-size of the element. |
| ex | It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter ‘x’. |
| ch | It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer “0” (zero). |
| rem | It is the font-size of the root element |
| vh | It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport. |
| vw | It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport |
| vmin | It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport’s smaller dimension. |
| vmax | It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport’s larger dimension. |
| % | It is used to define the measurement as a percentage that is relative to another value. |
Example
Output
CSS units: Time
Some animation properties require values to express in time.
| Unit | Explanation | s | It is the duration of time in seconds. |
|---|---|
| ms | It is the duration of time in milliseconds. 1ms = 1/100 of a second |
| Unit | Explanation |
|---|---|
| deg | It expresses the angles in degrees. |
| grad | It expresses the angles in gradians, i.e., 1/400 of a turn. |
| turn | It expresses the angles in turns, i.e., 360 degrees. |
Example
Output
