In CSS, units are used to define the size, spacing, and positioning of elements on a webpage.
They allow you to set dimensions (like width, height, margin, padding, etc.) relative to different contexts. CSS units can be broadly categorized into absolute and relative units.
Absolute Units
Absolute units are fixed and do not change relative to other elements or the viewport. These units are always the same size regardless of the surrounding context.
px (Pixels): Represents a fixed number of pixels on the screen. width: 200px; sets the width to exactly 200 pixels.
<div style="width: 200px; height: 100px; background-color: lightblue;">200px wide</div>
cm (Centimeters): Represents a physical measurement of centimeters. width: 10cm; sets the width to exactly 10 centimeters.
<div style="width: 10cm; height: 5cm; background-color: lightgreen;">10cm wide</div>
mm (Millimeters): Represents millimeters. width: 50mm; sets the width to exactly 50 millimeters.
<div style="width: 50mm; height: 25mm; background-color: lightcoral;">50mm wide</div>
in (Inches): Represents inches. width: 2in; sets the width to exactly 2 inches.
<div style="width: 2in; height: 1in; background-color: lightyellow;">2 inches wide</div>
pt (Points): Represents points, commonly used in print media. 1 point equals 1/72 of an inch.
font-size: 12pt; sets the font size to 12 points.
<p style="font-size: 12pt;">This text is 12 points in size.</p>
pc (Picas): Represents picas. 1 pica equals 12 points. width: 3pc; sets the width to 3 picas.
<div style="width: 3pc; height: 2pc; background-color: lightpink;">3 picas wide</div>
Relative Units
Relative units are context-dependent and can change size based on the dimensions of other elements, such as the viewport or the parent element.
% (Percentage): Represents a percentage relative to the parent element's dimensions.
width: 50%; sets the width to 50% of the parent element's width.
<div style="width: 50%; height: 50px; background-color: lightgray;">50% wide</div>
em: Represents the size relative to the font size of the parent element. 1em equals the current font size.
font-size: 2em; sets the font size to twice the size of the parent element's font size.
<p style="font-size: 2em;">This text is 2em in size.</p>
rem (Root em): Similar to em, but relative to the root element (usually the <html> element).
font-size: 1.5rem; sets the font size to 1.5 times the root element's font size.
<p style="font-size: 1.5rem;">This text is 1.5rem in size.</p>
vh (Viewport Height): Represents a percentage of the viewport's height. 1vh equals 1% of the viewport height.
height: 50vh; sets the height to 50% of the viewport's height.
<div style="height: 50vh; background-color: lightsteelblue;">50vh tall</div>
vw (Viewport Width): Represents a percentage of the viewport's width. 1vw equals 1% of the viewport width.
width: 50vw; sets the width to 50% of the viewport's width.
<div style="width: 50vw; height: 50px; background-color: lightgoldenrodyellow;">50vw wide</div>
Conclusion
Understanding CSS units is essential for creating responsive and adaptive layouts. Whether you need fixed or flexible designs, choosing the appropriate unit helps ensure your website displays correctly across different devices and screen sizes.