- Animation
- Background image
- Border Color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gradient
- Grid layout
- Height
- Linking a style sheet
- Margin
- Media query
- N-th-child selector
- Overflow property
- Padding
- Pixels
- Position property
- Position property
- Pseudo-classes
- Pseudo-elements
- Rounding an image
- Selectors
- Specificity
- Text align
- Transition property
- Units
- Variable
- Width
- Z-index
CSS
CSS Units: Syntax, Usage, and Examples
CSS units define how measurements like width, height, margins, and font sizes apply in stylesheets. They determine how elements scale, ensuring flexibility and precision in web design. By selecting the appropriate unit, you can create layouts that adapt to different screen sizes while maintaining visual consistency.
Types of CSS Units
CSS measurement units fall into two main categories: absolute and relative units.
Absolute Units
Absolute units have fixed values and remain unchanged regardless of surrounding elements. They work well when precise measurements are required, such as in print layouts.
.box {
width: 3cm; /* Centimeters */
height: 1in; /* Inches */
font-size: 12pt; /* Points */
}
Common Absolute Units
px(Pixels) – The most widely used unit for screen displays.cm,mm(Centimeters, Millimeters) – Common in print stylesheets.in(Inches) – Typically used for print layout dimensions.pt(Points, 1pt = 1/72 inch) – Used in typography.pc(Picas, 1pc = 12pt) – Primarily for print formatting.
Relative Units
Relative units adjust based on the element’s parent, root, or viewport, making them ideal for responsive web design.
.container {
width: 80vw; /* 80% of the viewport width */
font-size: 1.5rem; /* 1.5 times the root font size */
}
Common Relative Units
em– Adjusts relative to the computed font size of the parent element.rem– Relies on the root<html>element’s font size.%– Takes a percentage of the parent element’s dimension.vw,vh– Represents a percentage of the viewport’s width or height.vmin,vmax– Adapts to the smallest or largest viewport dimension.
When to Use CSS Units
Different units serve different purposes in web design. Choosing the right unit ensures flexibility, accessibility, and responsiveness.
1. Scalable Typography
Relative units like rem and em improve readability and accessibility by adapting when users adjust their browser’s default font size.
body {
font-size: 16px;
}
p {
font-size: 1.2rem; /* Scales with the root font size */
}
2. Responsive Layouts
Viewport-based units (vw, vh) create fluid designs that adapt to screen size.
.hero {
width: 100vw;
height: 50vh;
}
This ensures the section always fills half of the viewport’s height, regardless of screen resolution.
3. Precise Element Sizing
When exact dimensions are necessary, such as for buttons or icons, px provides reliable control.
.button {
width: 120px;
height: 40px;
}
Examples of CSS Units in Action
1. Viewport-Responsive Hero Section
.hero {
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #ff8a00, #e52e71);
}
This ensures the hero section always covers the full screen.
2. Scaling Fonts for Readability
h1 {
font-size: 3rem; /* Scales based on root font size */
}
p {
font-size: 1.5em; /* Relative to its parent */
}
3. Flexible Image Containers
img {
width: 100%;
max-width: 600px;
height: auto;
}
The image scales to fit its container without exceeding a maximum width.
Learn More About CSS Units
What Is a Unit of Absolute Size in CSS?
An absolute unit in CSS remains fixed, regardless of the surrounding elements. These units (px, cm, in) provide precise dimensions, making them useful for static layouts or print styles.
CSS Measurement Units and Their Differences
CSS measurement units control size and positioning across various properties.
- CSS size units affect dimensions like width, height, and font size.
- CSS width units apply specifically to width-related properties.
- CSS length units define distances, margins, and positioning values.
Choosing the Right Unit
- For scalable text → Use
remorem. - For fixed elements → Use
px. - For responsive layouts → Use
%,vw, orvh.
By understanding these units, you can create adaptable and visually consistent web pages.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.