What is Values and Units?

In CSS, values and units are the essential components that define the size, color, timing, and other properties of HTML elements.

A value is the specific setting for a CSS property, and a unit is the measurement system for that value

Values and Units have 7 main category :

1. Absolute Units
2. Relative Units
3. Color Values
4. URL Values
5. Keyword Values
6. calc() function
7. Custom Properties (CSS Variables)

What is Relative Units ?

• Relative units in CSS are measurements that are based on another length value, making them flexible and dynamic
• Unlike absolute units like pixels (px), which are fixed, relative units are ideal for creating responsive and scalable designs that adapt to different screen sizes and user preferences.

Font-relative units

These units are based on the size of a font, allowing for scalable typography and spacing.

em :

• Relative to:The font-size of the parent element.
• Behavior:When elements are nested, the size can compound, making it harder to predict the final size
• Use case: Excellent for components where you want a child's sizing (e.g., padding or margin) to scale proportionally with its own inherited text size.

rem :

• Relative to: The font-size of the root html element
• Behavior: Provides consistent and predictable sizing across the entire document because it is not affected by nesting
• Use case: Ideal for controlling the base font size and for global styling where consistent scaling is desired

Learn More →