Hidden Truths About CSS Units
Tags: css, webdev, tutorial, productivity
Published: 2023-06-28 14:17:12

CSS which means Cascading Style Sheet is used in web development to style websites, giving them that aesthetic feel and look. The styling properties include colors, font-family, font-size, length and width of an element. 
Mathematically, there are various units used to measure the size of elements. In this article, you will learn the different units used in CSS and how to apply them effectively in styling.

## RELATIVE AND ABSOLUTE UNITS
CSS has its standard units of measuring elements. These units can be categorized into the following:
  1. [Absolute Units](#absolute-units)
  2. [Relative Units](#relative-units)

### Absolute Units
A unit is said to be absolute when its value doesn't depend on any element. An absolute unit is a unit of length that defines a fixed size. You can refer to them as independent units. Examples are centimeter (cm), meter (m), and pixel (px). In CSS, the most commonly used is the pixel (px).

**FACTS ABOUT THE PIXEL UNIT**
- It is a measurement of length that is relative to the expected viewing distance of the device being used. 
- 16px is the default font size of all the popular browsers.

> When you assign the font size to the HTML tag, you override the default font-size of the browser. This practice is considered disrespectful as it disregards the effort people used to carefully customize the browser settings.

### RELATIVE UNITS
A unit is said to be relative when its value depends on an element before it. Its appearance changes with respect to the element it depends on. It is a unit of length that's relative to either a font-size or viewport. Frequently used are em, rem, percentage (%), VH, CH.

**FACTS ABOUT PERCENTAGE UNIT**
This unit makes the element to be dependent on the parent element (the element it is embedded inside). For instance, if you assign a value of 100% to a div element, the div element will be 100% of the parent element. If its direct parent element is the body, it'll be 100% of the default body size.

**FACTS ABOUT EM UNIT**
- It is dependent on the parent element property value.
- If the direct parent element value isn't set, it keeps going up the parent tree till it meets an element with the property value set.
- Each em unit is dependent on the previous (parent) em unit.
- As your codebase increases, it becomes difficult to keep track of the actual size of elements. 
- It is amazing on paddings, margin, and width as it becomes relative to the font-size of the parent element. 

**FACTS ABOUT REM UNIT**
- REM stands for Root Element. This unit is relative to the size of the root element (html tag). 
- This means that every element with a unit of rem has its actual size in multiples of 16.
- Mathematically, nrem means n x 16px.

**FACTS ABOUT VIEWPORT WIDTH (VW), AND VIEWPORT HEIGHT (VH)**
- Setting a property to vw makes the element to cover the value percentage of the viewport (screen size that is visible) and not the parent element again.

### Confused about which CSS unit to stick to?
The choice of CSS unit depends on the specific requirements of your design, the intended responsiveness, and the context in which the CSS property will be applied. Relative units like percentages, ems, and rems are generally preferred for responsive and adaptable layouts, while absolute units like pixels (px) can be useful for fixed sizes or precise control over certain elements. In general:
- px unit for borders.
- % unit for width relative to parent.
- em unit for margin and padding relative to fonts size of element.
- rem unit for fonts size relative to root.
- vw and vh for width and height relative to root.