Understanding CSS Units & Measurements

Published 3 months ago

CSS (Cascading Style Sheets) provides various units and measurement methods to define the size of elements, text, spacing, and more. Choosing the right unit can significantly impact the responsiveness and scalability of a web design. In this post, we'll explore absolute vs relative units and CSS variables (custom properties).

Absolute vs Relative Units

CSS units can be broadly categorized into absolute and relative units.

Absolute Units

Absolute units are fixed and do not change based on other elements or the viewport. These units are suitable for print styles or when maintaining a strict layout. However, they can hinder responsiveness when used in a flexible web design.

Common absolute units include:

px (Pixels): The most commonly used unit in web design, a pixel is a fixed measurement based on screen resolution.
cm (Centimeters), mm (Millimeters): Used for print styles but rarely in web development.
in (Inches): Typically used for print, equivalent to 96 pixels.
pt (Points), pc (Picas): More relevant to typography and print, where 1pt = 1/72 inch and 1pc = 12pt.

Relative Units

Relative units adjust based on the element’s properties, making them more flexible for responsive designs.

1. `em`

em is relative to the font size of the element or its parent.

Example:

body { font-size: 16px; }
p { font-size: 1.5em; } /* 1.5 × 16px = 24px */

Nested elements inherit the scaling, which can sometimes cause unintended size increases.

2. `rem`

rem (root em) is relative to the root <html> font size.

Example:

html { font-size: 16px; }
p { font-size: 1.5rem; } /* 1.5 × 16px = 24px */

Unlike em, rem remains consistent regardless of nesting.

3. `%`

Percentage values are relative to the parent element’s dimensions.

Example:

div { width: 50%; } /* 50% of the parent element’s width */

4. `vh` & `vw`

These units are based on the viewport size:

vh (Viewport Height): 1vh = 1% of the viewport height.
vw (Viewport Width): 1vw = 1% of the viewport width.

Example:

  div { height: 50vh; width: 80vw; } /* 50% of viewport height, 80% of viewport width */

These units are useful for full-screen layouts, hero sections, and responsive designs.

CSS Variables (Custom Properties)

CSS variables, also called custom properties, allow you to define reusable values in stylesheets. They improve maintainability and consistency across a project.

Declaring and Using CSS Variables

Define variables inside the :root selector for global scope:

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

Use them in styles:

button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

Benefits of CSS Variables:

Reusability: Use the same value across multiple elements.
Easier Theme Management: Quickly change the theme by modifying variables.
Responsive Adjustments: Combine with calc() for dynamic sizing.

Modifying Variables Dynamically

You can modify CSS variables using JavaScript:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Conclusion

Understanding CSS units and variables is essential for creating scalable, responsive designs. Absolute units are fixed, while relative units adjust based on context, making them ideal for fluid layouts. CSS variables improve code maintainability and allow dynamic styling adjustments. By mastering these concepts, you can build more flexible and maintainable web applications.

Obafemi Emmanuel